此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。