JS实现的3D拖拽翻页效果代码
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了JS实现的3D拖拽翻页效果,通过鼠标事件结合时间函数动态操作页面元素实现拖拽翻页的效果,需要的朋友可以参考下
本文实例讲述了JS实现的3D拖拽翻页效果。分享给大家供大家参考,具体如下:
以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法。感谢原创作者的创意,结果一样,但过程不一样哦。奉上代码,供大家参考。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./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; :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.sPropagation?oEvent.sPropagation():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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程