JS实现的3D拖拽翻页效果代码

本文实例讲述了JS实现的3D拖拽翻页效果。分享给大家供大家参考，具体如下：
以前看到一个很火的帖子，拖拽实现的翻页效果，非常的有创意，自己也很喜欢，于是乎就萌发了用自己的方法模仿的想法。感谢原创作者的创意，结果一样，但过程不一样哦。奉上代码，供大家参考。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/
具体代码如下：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>拖拽翻页</title><style type="text/css">*{margin:0;padding:0;}body{font-size:12px; overflow:hidden;}img{border:0;}li{list-style:none;}#drag{ width:682px; color:#fff; position:relative; margin:50px auto 0 auto; font-family:"Microsoft YaHei", "宋体";}#drag ul{}#drag ul li{ text-align:right; height:30px; line-height:30px; overflow:hidden; vertical-align:middle; font-size:14px; border-bottom:1px dashed #fff;}#drag ul li span{ float:right;}#drag ul li a{ float:left; color:#fff; text-decoration:none;}#drag div{ width:600px; height:350px; padding:40px; background:#77521d; cursor:e-resize; border:1px solid #999; position:absolute; left:0; top:0;}#drag div p{ width:100%; padding-bottom:20px; text-align:center; position:absolute; bottom:0; left:0;}</style><script type="text/javascript">window.onload=function（）{ var oDrag=document.getElementById（"drag"）; var aDiv=oDrag.getElementsByTagName（"div"）; var aLink=oDrag.getElementsByTagName（"a"）; var i=0; for（i=0;i<aDiv.length;i++） {aDiv[i].style.zIndex=（i+1）;aDiv[i].innerHTML+="<p>第 "+（i+1）+"/"+aDiv.length+" 页 提示：左右拖拽翻页</p>";aDiv[i].onmousedown=drag; } for（i=0;i<aLink.length;i++） {aLink[i].onmousedown=function（ev）{ var oEvent=ev||event; oEvent.stopPropagation?oEvent.stopPropagation（）:oEvent.cancelBubble=true;}; }};function drag（ev）{ var obj=this; var mouseStart=[]; var objStart=[]; var oEvent=ev||event; mouseStart.x=oEvent.clientX; objStart.x=this.offsetLeft; document.onmousemove=function（ev） {var oEvent=ev||event;var l=oEvent.clientX-mouseStart.x+objStart.x;var t=oEvent.clientY-mouseStart.y+objStart.y;obj.style.left=l+"px";return false; }; document.onmouseup=function（） {document.onmousemove=document.onmouseup=null;startMove（obj）; }; return false;}function startMove（obj）{ var oDrag=document.getElementById（"drag"）; var aDiv=oDrag.getElementsByTagName（"div"）; var iSpeed=0; obj.timer=setInterval（function（）{obj.onmousedown=null;obj.offsetLeft>=0?iSpeed+=10:iSpeed-=10;var l=obj.offsetLeft+iSpeed;if（l>obj.offsetWidth）{ l=obj.offsetWidth; moveDirection（iSpeed）;}else if（l<-obj.offsetWidth）{ l=-obj.offsetWidth; moveDirection（iSpeed）;}obj.style.left=l+"px"; },30）; function moveDirection（iSpeed） {for（i=0;i<aDiv.length;i++）{ aDiv[i].style.zIndex=parseInt（aDiv[i].style.zIndex）+1; if（aDiv[i]==obj） {obj.style.zIndex=parseInt（obj.style.zIndex）-aDiv.length; }}clearInterval（obj.timer）;t=setInterval（function（）{ obj.onmousedown=null; var l=obj.offsetLeft-iSpeed; if（（iSpeed<0 && l>0） || （iSpeed>0 && l<0）） {l=0;clearInterval（t）;obj.onmousedown=drag; } obj.style.left=l+"px";},30）; }}</script></head><body><div id="drag"> <div><ul> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">啊！爱人</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">宁静温泉</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">你的样子</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1980</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲1990</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">恋曲2000</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">亚细亚的孤儿</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">伴侣</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">童年</a></li></ul> </div> <div><ul> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱的箴言</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">爱人同志</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">思念</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">母亲</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">是否</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">牧童</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">青春舞曲</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">蒲公英</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">未来的主人翁</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">如今才是唯一</a></li></ul> </div> <div><ul> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">暗恋</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">弹唱词</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">飞车</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">东方之珠</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">滚滚红尘</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">光阴的故事</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">之乎者也</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">现象七十二变</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">乡愁四韵</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">穿过你的黑发我的手</a></li></ul> </div> <div><ul> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">大兵歌</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">歌</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">黄色面孔</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">台北红玫瑰</a></li> <li><span>2009-4-9 12:35</span><a target="_blank" href="#">我所不能了解的事</a></li></ul> </div></div></body></html>
希望本文所述对大家JavaScript程序设计有所帮助。