非常酷的javascript拖動分頁功能，無縫循環分頁，拖動鼠標即可完成分頁，鼠標向左拖動回到前一頁，向右拖動則翻開第二頁，還帶有動畫特效，著實很不錯，界面黑色，非主流風格，相信很多人會喜歡的。
javascript實現炫酷的拖動分頁
js
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 <html> <head> <title>拖動分頁</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; } .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-bottom: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 document.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.length>0){ page[0].style.zIndex=2; } for(i=0;i<page.length;i++){ page[i].className="page"; page[i].innerHTML+="<span class="tip">第 "+(i+1)+"/"+page.length+" 頁 提示：左右拖拽翻頁</span>"; page[i].id="page"+i; page[i].i=i; page[i].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); } } } page[i].onmousemove=function(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.offsetLeft<75){ var cu=(this.i==0)?page.length-1:this.i-1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } if(this.offsetLeft>75){ var cu=(this.i==page.length-1)?0:this.i+1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } } } page[i].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.offsetLeft<75){ 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.offsetLeft>75){ 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.style.zIndex=0; flyin(id(obj.id)); } } } function flyin(obj){ if(obj.offsetLeft<75){ 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.offsetLeft>75){ 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>html:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <div> <ul> <li><span>2009-4-29 02:16</span><a href=#>東方之珠</a></li> <li><span>2009-4-29 02:16</span><a href=#>啊！愛人</a></li> <li><span>2009-4-29 02:16</span><a href=#>寧靜溫泉</a></li> <li><span>2009-4-29 02:16</span><a href=#>你的樣子</a></li> <li><span>2009-4-29 02:16</span><a href=#>戀曲1980</a></li> <li><span>2009-4-29 02:16</span><a href=#>戀曲1980</a></li> <li><span>2009-4-29 02:16</span><a href=#>戀曲2000</a></li> <li><span>2009-4-29 02:16</span><a href=#>亞細亞的孤兒</a></li> <li><span>2009-4-29 02:16</span><a href=#>童年</a></li> </ul> </div> <div> <ul> <li><span>2009-4-29 02:16</span><a href=#>彈唱詞</a></li> <li><span>2009-4-29 02:16</span><a href=#>飛車</a></li> <li><span>2009-4-29 02:16</span><a href=#>東方之珠</a></li> <li><span>2009-4-29 02:16</span><a href=#>滾滾紅塵</a></li> <li><span>2009-4-29 02:16</span><a href=#>光陰的故事</a></li> <li><span>2009-4-29 02:16</span><a href=#>之乎者也</a></li> <li><span>2009-4-29 02:16</span><a href=#>現象七十二變</a></li> <li><span>2009-4-29 02:16</span><a href=#>鄉愁四韻</a></li> <li><span>2009-4-29 02:16</span><a href=#>穿過你的黑發我的手</a></li> </ul> </div> <div> <ul> <li><span>2009-4-29 02:16</span><a href=#>大兵歌</a></li> <li><span>2009-4-29 02:16</span><a href=#>黃色面孔</a></li> <li><span>2009-4-29 02:16</span><a href=#>台北紅玫瑰</a></li> </ul> </div> </body> </html>以上所述就是本文的全部內容了，希望大家能夠喜歡。