用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);     

          

   });