《js实现鼠标拖拽翻页效果_js鼠标滚轮事件翻页.docx》由会员分享，可在线阅读，更多相关《js实现鼠标拖拽翻页效果_js鼠标滚轮事件翻页.docx（10页珍藏版）》请在三一文库上搜索。
1、本文格式为Word版，下载可任意编辑js实现鼠标拖拽翻页效果_js鼠标滚轮事件翻页 学习前端的同学你们知道怎么实现js鼠标拖拽翻页效果吗?不知道的话跟着我一起来学习了解js鼠标拖拽翻页效果的方法。 js鼠标拖拽翻页效果的方法 html head titleblog/title meta http-equiv=content-type content=text/html; charset=gb2312 style body border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体;
2、.page position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; ul height:320px; list-style:none; margin:40px 50px 0px; padding:0px; li width:100%; height:30px; line-height:30px; font-size:14px; text-align:left; border-bo
3、ttom:1px dashed #999; a text-decoration:none; color:#999; a:hover font-weight:bold; li span float:right; color:#999; .tip display:block; width:100%; font-size:12px; color:#999; text-align:center; margin:10px 0px 20px; /style /head body onselectstart=return false; script function id(obj) return docum
4、ent.getElementById(obj); var page; var lm,mx; var md=false; var sh=0; var en=false; window.onload=function() page=document.getElementsByTagName(div); if(page.length0) page0.style.zIndex=2; for(i=0;ipage.length;i+) pagei.className=page; pagei.innerHTML+=span class=tip第 +(i+1)+/+page.length+ 页 提示：左右拖拽
5、翻页/span; pagei.id=page+i; pagei.i=i; pagei.onmousedown=function(e) if(!en) if(!e)e=e|window.event; lm=this.offsetLeft; mx=(e.pageX)?e.pageX:e.x; this.style.cursor=w-resize; md=true; if(document.all) this.setCapture(); else window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); pagei.onmousemove=functi
6、on(e) if(md) en=true; if(!e)e=e|window.event; var ex=(e.pageX)?e.pageX:e.x; this.style.left=ex-(mx-lm)+350; if(this.offsetLeft75) var cu=(this.i=0)?page.length-1:this.i-1; pagesh.style.zIndex=0; pagecu.style.zIndex=1; this.style.zIndex=2; sh=cu; if(this.offsetLeft75) var cu=(this.i=page.length-1)?0:
7、this.i+1; pagesh.style.zIndex=0; pagecu.style.zIndex=1; this.style.zIndex=2; sh=cu; pagei.onmouseup=function() this.style.cursor=default; md=false; if(document.all) this.releaseCapture(); else window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); flyout(this); function flyout(obj) if(obj.offsetLeft75
8、) if( (obj.offsetLeft + 350 - 20) -275 ) obj.style.left=obj.offsetLeft + 350 - 20; window.setTimeout(flyout(id(+obj.id+);,0); else obj.style.left=-275; obj.style.zIndex=0; flyin(id(obj.id); if(obj.offsetLeft75) if( (obj.offsetLeft + 350 + 20) 1125 ) obj.style.left=obj.offsetLeft + 350 + 20; window.s
9、etTimeout(flyout(id(+obj.id+);,0); else obj.style.left=1125; obj.style.zIndex=0; flyin(id(obj.id); function flyin(obj) if(obj.offsetLeft75) if( (obj.offsetLeft + 350 + 20) 425 ) obj.style.left=obj.offsetLeft + 350 + 20; window.setTimeout(flyin(id(+obj.id+);,0); else obj.style.left=425; en=false; if(
10、obj.offsetLeft75) if( (obj.offsetLeft + 350 - 20) 425 ) obj.style.left=obj.offsetLeft + 350 - 20; window.setTimeout(flyin(id(+obj.id+);,0); else obj.style.left=425; en=false; /script div ul lispan2021-4-9 12:35/spana href=东方之珠/a/li lispan2021-4-9 12:35/spana href=啊!停不住的爱人/a/li lispan2021-4-9 12:35/s
11、pana href=安静温泉/a/li lispan2021-4-9 12:35/spana href=你的样子/a/li lispan2021-4-9 12:35/spana href=恋曲1980/a/li lispan2021-4-9 12:35/spana href=恋曲1990/a/li lispan2021-4-9 12:35/spana href=恋曲2021/a/li lispan2021-4-9 12:35/spana href=亚细亚的孤儿/a/li lispan2021-4-9 12:35/spana href=伴侣/a/li lispan2021-4-9 12:35/s
12、pana href=童年/a/li /ul /div div ul lispan2021-4-9 12:35/spana href=爱的箴言/a/li lispan2021-4-9 12:35/spana href=爱人同志/a/li lispan2021-4-9 12:35/spana href=思念/a/li lispan2021-4-9 12:35/spana href=母亲/a/li lispan2021-4-9 12:35/spana href=是否/a/li lispan2021-4-9 12:35/spana href=牧童/a/li lispan2021-4-9 12:35/s
13、pana href=青春舞曲/a/li lispan2021-4-9 12:35/spana href=蒲公英/a/li lispan2021-4-9 12:35/spana href=将来的仆人翁/a/li lispan2021-4-9 12:35/spana href=如今才是唯一/a/li /ul /div div ul lispan2021-4-9 12:35/spana href=暗恋/a/li lispan2021-4-9 12:35/spana href=弹唱词/a/li lispan2021-4-9 12:35/spana href=飞车/a/li lispan2021-4-9
14、 12:35/spana href=东方之珠/a/li lispan2021-4-9 12:35/spana href=滚滚红尘/a/li lispan2021-4-9 12:35/spana href=光阴的故事/a/li lispan2021-4-9 12:35/spana href=之乎者也/a/li lispan2021-4-9 12:35/spana href=现象七十二变/a/li lispan2021-4-9 12:35/spana href=乡愁四韵/a/li lispan2021-4-9 12:35/spana href=穿过你的黑发我的手/a/li /ul /div div ul lispan2021-4-9 12:35/spana href=大兵歌/a/li lispan2021-4-9 12:35/spana href=歌/a/li lispan2021-4-9 12:35/spana href=黄色面孔/a/li lispan2021-4-9 12:35/spana href=台北红玫瑰/a/li lispan2021-4-9 12:35/spana href=我所不能了解的事/a/li /ul /div /body /html js实现鼠标拖拽翻页效果第 10 页 共 10 页