拖动翻页效果

《拖动翻页效果》由会员分享，可在线阅读，更多相关《拖动翻页效果（6页珍藏版）》请在金锄头文库上搜索。

1、 拖动翻页效果 查看效果:拖动翻页效果 html headtitle 拖动翻页效果/title meta http-equiv=content-type content=“text/html; charset=gb2312“ style body border:0px; margin:0px; overflow:hidden; background-color:transparent;font-family:宋体; .page position:absolute; width:700px; border:1px solid #999; background-color:#000; left:4

2、25px; 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-bottom:1px dashed #999; a text-decoration:none; color:#999; a:hover font-weight:bold; li spa

3、n 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 document.getElementById(obj); var page; var lm,mx; var md=false; var sh=0; var en=false; wind

4、ow.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+“ 页 提示：左右拖拽翻页 /span“; pagei.id=“page“+i; pagei.i=i; pagei.onmousedown=function(e) if(!en)

5、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=function(e) if(md) en=true; if(!e)e=e|window.event; var ex=(e.pageX)?e.pageX:e.x

6、; 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:this.i+1; pagesh.style.zIndex=0; pagecu.style.zIndex=1; this.style.zIndex=

7、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) if( (obj.offsetLeft + 350 - 20) -275 ) obj.style.left=obj.offsetLeft +

8、 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.setTimeout(“flyout(id(“+obj.id+“);“,0); else obj.style.left=1125; obj.

9、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(obj.offsetLeft75) if( (obj.offsetLeft + 350 - 20) 425 ) obj.s

10、tyle.left=obj.offsetLeft + 350 - 20; window.setTimeout(“flyin(id(“+obj.id+“);“,0); else obj.style.left=425; en=false; /script div ullispan2009-4-9 12:35/spana href=#东方之珠/a/li lispan2009-4-9 12:35/spana href=#啊！停不住的爱人/a/li lispan2009-4-9 12:35/spana href=#宁静温泉/a/lilispan2009-4-9 12:35/spana href=#你的样

11、子/a/li lispan2009-4-9 12:35/spana href=#恋曲 1980/a/li lispan2009-4-9 12:35/spana href=#恋曲 1990/a/li lispan2009-4-9 12:35/spana href=#恋曲 2000/a/li lispan2009-4-9 12:35/spana href=#亚细亚的孤儿/a/li lispan2009-4-9 12:35/spana href=#伴侣/a/li lispan2009-4-9 12:35/spana href=#童年/a/li /ul /div div ullispan2009-4-

12、9 12:35/spana href=#爱的箴言/a/li lispan2009-4-9 12:35/spana href=#爱人同志/a/li lispan2009-4-9 12:35/spana href=#思念/a/li lispan2009-4-9 12:35/spana href=#母亲/a/li lispan2009-4-9 12:35/spana href=#是否/a/li lispan2009-4-9 12:35/spana href=#牧童/a/li lispan2009-4-9 12:35/spana href=#青春舞曲/a/li lispan2009-4-9 12:35

13、/spana href=#蒲公英/a/li lispan2009-4-9 12:35/spana href=#未来的主人翁/a/li lispan2009-4-9 12:35/spana href=#如今才是唯一/a/li /ul /div div ullispan2009-4-9 12:35/spana href=#暗恋/a/li lispan2009-4-9 12:35/spana href=#弹唱词/a/li lispan2009-4-9 12:35/spana href=#飞车/a/li lispan2009-4-9 12:35/spana href=#东方之珠/a/li lispan

14、2009-4-9 12:35/spana href=#滚滚红尘/a/li lispan2009-4-9 12:35/spana href=#光阴的故事/a/li lispan2009-4-9 12:35/spana href=#之乎者也/a/li lispan2009-4-9 12:35/spana href=#现象七十二变/a/li lispan2009-4-9 12:35/spana href=#乡愁四韵/a/li lispan2009-4-9 12:35/spana href=#穿过你的黑发我的手/a/li /ul /div div ullispan2009-4-9 12:35/spana href=#大兵歌/a/li lispan2009-4-9 12:35/spana href=#歌/a/li lispan2009-4-9 12:35/spana href=#黄色面孔/a/li lispan2009-4-9 12:35/spana href=#台北红玫瑰/a/li lispan2009-4-9 12:35/spana href=#我所不能了解的事/a/li/ul /div /body /html