本文實例講述了JS實現的3D拖拽翻頁效果。分享給大家供大家參考，具體如下：
以前看到一個很火的帖子，拖拽實現的翻頁效果，非常的有創意，自己也很喜歡，于是乎就萌發了用自己的方法模仿的想法。感謝原創作者的創意，結果一樣，但過程不一樣哦。奉上代碼，供大家參考。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
