这种翻书的效果怎么实现.有源代码吗?

http://truemag.qq.com/engine/isapi/frame.dll?bc=1883&co=cpcfan&gp=12&sep=20&ui=1.7&ul=zh-cn

解决方案 »

  1.   

    <script type="text/javascript">/********************************************************
    Create a div with transparent place holder in your html
    <div id="Book" style="position:relative">
    <img src="placeholder.gif" width="144" height="227">
    </div>
    width = 2*book image width +4 height = book image height+2 Insert onload in body tag
    <body onload="ImageBook()">
    *********************************************************/// 7 variables to control behavior
    var Book_Image_Width=140;
    var Book_Image_Height=225;
    var Book_Border=true;
    var Book_Border_Color="gray";
    var Book_Speed=15;
    var Book_NextPage_Delay=1500; //1 second=1000
    var Book_Vertical_Turn=0; // array to specify images and optional links. At least 4
    // If Link is not needed keep it "" Book_Image_Sources=new Array(
    "jsimg/photo1.jpg","http://www.smallrain.net.net",
    "jsimg/photo2.jpg","http://www.jingran.org",
    "jsimg/photo3.jpg","", //this slide isn't linked
    "jsimg/photo4.jpg","http://www.b2bsky.com" // NOTE No comma after last line
    );/***************** DO NOT EDIT BELOW **********************************/
    var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
    var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length); function ImageBook(){
    if(document.getElementById){
    for(i=0;i<Book_Image_Sources.length;i+=2){
    B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
    Book_Div=document.getElementById("Book");
    B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
    B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
    B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
    B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
    B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
    B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
    B_LI.style.left=0+"px";
    B_MI.style.top=0+"px";
    B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
    B_RI.style.top=0+"px";
    B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
    B_LI.style.height=Book_Image_Height+"px";
    B_MI.style.height=Book_Image_Height+"px";
    B_RI.style.height=Book_Image_Height+"px";
    B_LI.style.width=Book_Image_Width+"px";
    B_MI.style.width=Book_Image_Width+"px";
    B_RI.style.width=Book_Image_Width+"px";
    if(Book_Border){
    B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
    B_LI.style.borderWidth=1+"px";
    B_MI.style.borderWidth=1+"px";
    B_RI.style.borderWidth=1+"px";
    B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
    B_LI.src=B_Pre_Img[0].src;
    B_LI.lnk=Book_Image_Sources[1];
    B_MI.src=B_Pre_Img[2].src;
    B_MI.lnk=Book_Image_Sources[3];
    B_RI.src=B_Pre_Img[4].src;
    B_RI.lnk=Book_Image_Sources[5];
    B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
    B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
    B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
    BookImages()}} function BookImages(){
    if(!B_Stppd){
    if(Book_Vertical_Turn){
    B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
    MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
    B_MI.style.top=MidOffset+"px";
    B_MI.style.height=B_MSz+"px"}
    else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
    MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
    B_MI.style.left=MidOffset+"px";
    B_MI.style.width=B_MSz+"px"}
    B_Angle+=Book_Speed/720*Math.PI;
    if(B_Angle>=Math.PI/2&&B_Direction){
    B_Direction=0;
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_MI.src=B_Pre_Img[B_CrImg].src;
    B_MI.lnk=Book_Image_Sources[B_CrImg+1];
    B_CrImg+=2}
    if(B_Angle>=Math.PI){
    B_Direction=1;
    B_TI=B_LI;
    B_LI=B_MI;
    B_MI=B_TI;
    if(Book_Vertical_Turn)B_MI.style.top=0+"px";
    else B_MI.style.left=Book_Image_Width+1+"px";
    B_MI.src=B_RI.src;
    B_MI.lnk=B_RI.lnk; setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
    else setTimeout("BookImages()",50)}
    else setTimeout("BookImages()",50)} function Book_Next_Delay(){
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_RI.src=B_Pre_Img[B_CrImg].src;
    B_RI.lnk=Book_Image_Sources[B_CrImg+1];
    B_MI.style.zIndex=2;
    B_LI.style.zIndex=1;
    B_Angle=0;
    B_CrImg+=2;
    setTimeout("BookImages()",50)} function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
    function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
    function B_Rstrt(){B_Stppd=false}
    </script>-----------------------------------------以下放到<body>里
    <div id="Book" style="position:relative">
    <img src="jsimg/placeholder.gif" width="144" height="227">
    </div>
      

  2.   

    兄弟，你的翻页效果我看了，我要的是可以手工控制的翻页效果，即可以向前翻，还可以向后翻，下面是我在无忧里看到的代码，但是这段代码只能四张图片翻，如果图片多的话就不行了。请兄弟看一下。有没有更高级的版本？？谢谢了。以下是代码：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    body {
    background-image: url(bg.gif);
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    }
    -->
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);var currentTime = 0 ;
    var w = 475;
    var l = 31;
    function nextPage(  )
    {
    //step 1

    var g = 1.2;
    var s = 10*g*currentTime*currentTime*currentTime ;
    if ( s < 100)
    {
    document.getElementById("right_front").style.width = w*(100-s*1)/100  ;
    currentTime++ ;
    var t = setTimeout( "nextPage();" , 10 );
    }
    else
    {
    document.getElementById("right_front").style.width = 0 ;

    currentTime = 0 ;
    nextPageX(); }

    }
    function nextPageX(  )
    {
    //step 2

    var g = 1.2;
    var s = 10*g*currentTime*currentTime*currentTime ;
    document.getElementById("left_front").style.zIndex = 2;
    if ( s < 100)
    {
    document.getElementById("left_front").style.width = w*s/100 ;

    document.getElementById("left_front").style.left = Math.ceil( l + w - w*s/100 ) ;
    currentTime++ ;
    t = setTimeout( "nextPageX();" , 10 );
    }
    else
    {
    document.getElementById("left_front").style.width = w ;
    document.getElementById("left_front").style.left = l ;
    currentTime = 0;

    }}function prevPage(  )
    {
    //step 2

    var g = 1.2;
    var s = 10*g*currentTime*currentTime*currentTime ;

    if ( s < 100)
    {
    document.getElementById("left_front").style.width = Math.ceil(w*(100-s)/100) ;

    document.getElementById("left_front").style.left = Math.ceil( l + w*s/100 ) ;
    currentTime++ ;
    t = setTimeout( "prevPage();" , 10 );
    }
    else
    {
    document.getElementById("left_front").style.width = 0 ;
    document.getElementById("left_front").style.zIndex = 1;
    currentTime = 0 ;
    prevPageX();
    }
    }
    function prevPageX(  )
    {
    //step 1

    var g = 1.2;
    var s = 10*g*currentTime*currentTime*currentTime ;
    if ( s < 100)
    {
    document.getElementById("right_front").style.width = w*s/100  ;
    currentTime++ ;
    var t = setTimeout( "prevPageX();" , 10 );
    }
    else
    {
    document.getElementById("right_front").style.width = w ;
    document.getElementById("right_front").style.zIndex = 2;
    currentTime = 0;
    }
    }
    //-->
    </script>
    </head><body>
    <div id="left_back" style="position:absolute; width:475px; height:650px; z-index:2; left: 31px; top: 21px;"><img src="http://pic8.com/mlmm/1/view/13.jpg" width="100%" height="650"></div>
    <div id="left_front" style="position:absolute; width:475px; height:650px; z-index:1; left: 31px; top: 21px;"><a href="javascript:prevPage();"><img src="http://pic8.com/mlmm/3/view/4.jpg" width="100%" height="650" border="0"></a></div>
    <div id="right_front" style="position:absolute; width:475px; height:650px; z-index:2; left: 507px; top: 21px;"><a href="javascript:nextPage();"><img src="http://pic8.com/mlmm/2/view/7.jpg" width="100%" height="650" border="0"></a></div>
    <div id="right_back" style="position:absolute; width:475px; height:650px; z-index:1; left: 507px; top: 21px;"><img src="http://pic8.com/mlmm/1/view/8.jpg" width="100%" height="650"></div></body>
    </html>
      

  3.   

    flash??
    要是能用我就用了，客户不同意呀。。
      

  4.   

    那本杂志的翻书效果我看了。楼上有些人理解错了，不是滚动.
    翻书效果主要是用几何方法处理了。你可以找到原代码的.
    大致原理是:将左边的一个层(一页)逐渐缩小.用滤镜 .为0时,显示另一个层,这个层为改页的背面。然后逐渐放大.over.你等了10天了。也不自己写，好懒
      

  5.   

    durn_kmoon,我要是自己能写出来这样的代码我早就写了，我昨天联系了做QQ志的那家公司，他给我发了一个单机的演示版，但是是EXE文件，这套系统是韩国人写的，他们是代理，看源文件根本看不到核心代码，他做了保护。还有楼上的楼上，我把分数加到一百分了。。谁能帮我写出来这样的程序，我一定跪谢。。我的要求是可以翻页，放大就行了。我不要求像QQ杂志上做的那么好，上下左右移动，我只要放成原始图的大小就行了，然后用滚动条移动看就行了。如果有兴趣，加我QQ：43040344。在这里我本不想谈钱的，但是现在没办法了，天下没有免费的午餐，具体事宜加我QQ面谈吧。。不胜感激了。。
      

  6.   

    就这个效果啊？ 我看不咋的。写起来也不难。就是改变图片或层的宽度而已。这个翻的效果其实很差。
    不知道大家有没有看过flash做的翻页的效果？
      

  7.   

    访问http://mag.qq.com/cgi-bin/openebook?bc=2015&rbc=321&co=cng&ui=4.0&fp=20
    慢慢研究吧~