用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", "top right");
        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", "top left"); 
        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。