首先非常感谢网友剑心的无私分享，此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代码如下：
<div id="turner">
<div id="flip"></div>
<div id="leftpage"></div>
<div id="rightpage"></div>
</div>
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友剑心 翻书特效 滑动插件 旋转特效 图片3D旋转 图片旋转轮播