翻书效果功能代码如下：

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

所用图片如下：

ITPub博客

一款Jquery实现翻书特效