本文实例讲述了jquery实现的点击翻书效果代码。分享给大家供大家参考，具体如下：

这是自写一个翻书的射流研究…效果，基于jquery-1.4.2.min.js插件实现，还正在完善中，希望大家能喜欢，我觉得不错。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-click-cha-page-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题自写一个翻书的射流研究…效果/title脚本类型=' text/JavaScript '语言=' JAVAScript ' src=' http : jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript '语言=' JavaScript ' $(function(){ $(' # right ')).click(function(){ var roll=$(' div/')，{ CSS : { position : ' absolute '、border: 'solid 1px #999 '、left: '806px '、top: '10px '、height: '494px '、width: ' 1px '、background 33: ' # fff URL(images/ecx)。png)repeat-y-200 px ' 0px ' appendo($(' # book ').parent())；$(滚)。动画({ left: '10px '，width: '398px '，' background-position ' : ' 272 px 0px ' }，1000，function() { $('#left ').CSS({ ' background ' : ' # fff ' })；$(滚)。fadeOut(300，函数(){ $(roll)).移除();}) });});});/script/head body style=' padd :5 px；margin :0 div id=' book ' style=' width :797 px；高度：494px背景# cccborder : solid 6px # cccdiv id=' left ' style=' width :398 px；height :494 pxfloat : leftbackground : URL(图像/PlH。巴布亚新几内亚)无重复左上角；光标：指针指针；/div div id=' right ' style=' width :398 px；高度：494pxfloat:left背景# fffcursor:pointer指针指针；边距-左侧：1 px向右文本对齐：p style=' margin-top :470 px；font-size :12 px颜色： # 999 '点这翻页/p/div /div/body/html希望本文所述对大家jQuery程序设计有所帮助。