用Jquery實現翻書特效

此Jquery特效是一款非常實用的功能，翻書效果一直很受人喜歡，目前功能比較簡單，暫時只實現了左右翻書的效果，功能還可以無限的擴展。

 

翻書功能代碼js代碼如下：

 

var $pageheight = 189;

var $pagewidth = 146;

var $pageYpos = 0;

$(document).ready(function(){

   //點擊左邊頁面翻書事件

   $("#leftpage").click( function() {

       $pageYpos = $pageYpos + $pageheight;

       $("#leftpage").css("background-position", "0px"+$pageYpos+"px"); 

       $("#flip").css("background-position", "topright");

       setTimeout ('$("#flip").css("background-position","top center");', 200);

       setTimeout('$("#rightpage").css("background-position", "146px"+$pageYpos+"px");', 200);     

          

   });              

    

   //點擊右邊頁面翻書事件

   $("#rightpage").click( function() {

       $pageYpos = $pageYpos - $pageheight;

       $("#rightpage").css("background-position", "0px"+$pageYpos+"px");

       $("#flip").css("background-position", "topleft");

       setTimeout ('$("#flip").css("background-position","top center");', 200);

       setTimeout('$("#leftpage").css("background-position", "146px"+$pageYpos+"px");', 200);

   });

});

 

HTML代碼如下：

view sourceprint?

<div id="turner">

   <div id="flip"></div>

   <div id="leftpage"></div>

   <div id="rightpage"></div>

</div>

 

本文爲Anyforweb技術分享博客，需要了解網站建設及更多web應用相關信息，請訪問anyforweb.com。