超酷的鼠标拖拽翻页(分页)效果实现javascript代码

</p> <p><title>拖动<a href="https://kunjuke.com/tag/3353/" title="分页" target="_blank">分页</a></title> </p> <p>body{<br /> border:0px;<br /> margin:0px;<br /> overflow:hidden;<br /> background-color:transparent;<br /> font-family:宋体;<br /> }<br /> .page{<br /> position:absolute;<br /> width:700px;<br /> border:1px solid #999;<br /> background-color:#000;<br /> left:425px;<br /> margin-left:-350px;<br /> cursor:default;<br /> z-index:0;<br /> }<br /> ul{<br /> height:320px;<br /> list-style:none;<br /> margin:40px 50px 0px;<br /> padding:0px;<br /> }<br /> li{<br /> width:100%;<br /> height:30px;<br /> line-height:30px;<br /> font-size:14px;<br /> text-align:left;<br /> border-bottom:1px dashed #999;<br /> }<br /> a{<br /> text-decoration:none;<br /> color:#999;<br /> }<br /> a:hover{<br /> font-weight:bold;<br /> }<br /> li span{<br /> float:right;<br /> color:#999;<br /> }<br /> .tip{<br /> display:block;<br /> width:100%;<br /> font-size:12px;<br /> color:#999;<br /> text-align:center;<br /> margin:10px 0px 20px;<br /> } </p> <p>function id(obj){<br /> return document.getelementbyid(obj);<br /> }<br /> var page;<br /> var lm,mx;<br /> var md=false;<br /> var sh=0;<br /> var en=false;<br /> window.onload=function(){<br /> page=document.getelementsbytagname("div");<br /> if(page.length>0){<br /> page[0].style.zindex=2;<br /> }<br /> for(i=0;i<page.length;i++){<br /> page[i].classname="page";<br /> page[i].innerhtml+="<span class="tip">第 "+(i+1)+"/"+page.length+" 页 提示：左右<a href="https://kunjuke.com/tag/1036/" title="拖拽" target="_blank">拖拽</a><a href="https://kunjuke.com/tag/1538/" title="翻页" target="_blank">翻页</a></span>";<br /> page[i].id="page"+i;<br /> page[i].i=i;<br /> page[i].onmousedown=function(e){<br /> if(!en){<br /> if(!e){e=e||window.event;}<br /> lm=this.offsetleft;<br /> mx=(e.pagex)?e.pagex:e.x;<br /> this.style.cursor="w-resize";<br /> md=true;<br /> if(document.all){<br /> this.setcapture();<br /> }else{<br /> window.captureevents(event.mousemove|event.mouseup);<br /> }<br /> }<br /> }<br /> page[i].onmousemove=function(e){<br /> if(md){<br /> en=true;<br /> if(!e){e=e||window.event;}<br /> var ex=(e.pagex)?e.pagex:e.x;<br /> this.style.left=ex-(mx-lm)+350; </p> <p>if(this.offsetleft75){<br /> var cu=(this.i==page.length-1)?0:this.i+1;<br /> page[sh].style.zindex=0;<br /> page[cu].style.zindex=1;<br /> this.style.zindex=2;<br /> sh=cu;<br /> } </p> <p>}<br /> }<br /> page[i].onmouseup=function(){<br /> this.style.cursor="default";<br /> md=false;<br /> if(document.all){<br /> this.releasecapture();<br /> }else{<br /> window.releaseevents(event.mousemove|event.mouseup);<br /> }<br /> flyout(this);<br /> }<br /> }<br /> }<br /> function flyout(obj){<br /> if(obj.offsetleft -275 ){<br /> obj.style.left=obj.offsetleft + 350 - 20;<br /> window.settimeout("flyout(id('"+obj.id+"'));",0);<br /> }else{<br /> obj.style.left=-275;<br /> obj.style.zindex=0;<br /> flyin(id(obj.id));<br /> }<br /> }<br /> if(obj.offsetleft>75){<br /> if( (obj.offsetleft + 350 + 20) < 1125 ){<br /> obj.style.left=obj.offsetleft + 350 + 20;<br /> window.settimeout("flyout(id('"+obj.id+"'));",0);<br /> }else{<br /> obj.style.left=1125;<br /> obj.style.zindex=0;<br /> flyin(id(obj.id));<br /> }<br /> }<br /> }<br /> function flyin(obj){<br /> if(obj.offsetleft<75){<br /> if( (obj.offsetleft + 350 + 20) 75){<br /> if( (obj.offsetleft + 350 - 20) > 425 ){<br /> obj.style.left=obj.offsetleft + 350 - 20;<br /> window.settimeout("flyin(id('"+obj.id+"'));",0);<br /> }else{<br /> obj.style.left=425;<br /> en=false;<br /> }<br /> }<br /> } </p> <ul> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> </ul> <ul> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> </ul> <ul> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> </ul> <ul> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> <li><span>2009-4-9 12:35</span></li> </ul> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]