javascript实现炫酷的拖动分页

非常酷的javascript拖动分页功能，无缝循环分页，拖动鼠标即可完成分页，鼠标向左拖动回到前一页，向右拖动则翻开第二页，还带有动画特效，着实很不错，界面黑色，非主流风格，相信很多人会喜欢的。

javascript实现炫酷的拖动分页

js

1. <html> 
2. <head> 
3. <title>拖动分页</title> 
4. <meta http-equiv=content-type content="text/html; charset=gb2312"> 
5. <style> 
6. body{ 
7. border:0px; 
8. margin:0px; 
9. overflow:hidden; 
10. background-color:transparent; 
11. } 
12. .page{ 
13. position:absolute; 
14. width:700px; 
15. border:1px solid #999; 
16. background-color:#000; 
17. left:425px; 
18. margin-left:-350px; 
19. cursor:default; 
20. z-index:0; 
21. } 
22. ul{ 
23. height:320px; 
24. list-style:none; 
25. margin:40px 50px 0px; 
26. padding:0px; 
27. } 
28. li{ 
29. width:100%; 
30. height:30px; 
31. line-height:30px; 
32. font-size:14px; 
33. text-align:left; 
34. border-bottom:1px dashed #999; 
35. } 
36. a{ 
37. text-decoration:none; 
38. color:#999; 
39. } 
40. a:hover{ 
41. font-weight:bold; 
42. } 
43. li span{ 
44. float:right; 
45. color:#999; 
46. } 
47. .tip{ 
48. display:block; 
49. width:100%; 
50. font-size:12px; 
51. color:#999; 
52. text-align:center; 
53. margin:10px 0px 20px; 
54. } 
55.  
56.  
57. </style> 
58. </head> 
59. <body onselectstart="return false;"> 
60. <script> 
61. function id(obj){ 
62. return document.getElementById(obj); 
63. } 
64. var page; 
65. var lm,mx; 
66. var md=false; 
67. var sh=0; 
68. var en=false; 
69. window.onload=function(){ 
70. page=document.getElementsByTagName("div"); 
71. if(page.length>0){ 
72. page[0].style.zIndex=2; 
73. } 
74.  
75. for(i=0;i<page.length;i++){ 
76. page[i].className="page"; 
77. page[i].innerHTML+="<span class="tip">第 "+(i+1)+"/"+page.length+" 页 提示：左右拖拽翻页</span>"; 
78. page[i].id="page"+i; 
79. page[i].i=i; 
80. page[i].onmousedown=function(e){ 
81. if(!en){ 
82. if(!e){e=e||window.event;} 
83. lm=this.offsetLeft; 
84. mx=(e.pageX)?e.pageX:e.x; 
85. this.style.cursor="w-resize"; 
86. md=true; 
87. if(document.all){ 
88. this.setCapture(); 
89. }else{ 
90. window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
91. } 
92. } 
93. } 
94. page[i].onmousemove=function(e){ 
95. if(md){ 
96. en=true; 
97. if(!e){e=e||window.event;} 
98. var ex=(e.pageX)?e.pageX:e.x; 
99. this.style.left=ex-(mx-lm)+350; 
100. if(this.offsetLeft<75){ 
101. var cu=(this.i==0)?page.length-1:this.i-1; 
102. page[sh].style.zIndex=0; 
103. page[cu].style.zIndex=1; 
104. this.style.zIndex=2; 
105. sh=cu; 
106. } 
107.  
108. if(this.offsetLeft>75){ 
109. var cu=(this.i==page.length-1)?0:this.i+1; 
110. page[sh].style.zIndex=0; 
111. page[cu].style.zIndex=1; 
112. this.style.zIndex=2; 
113. sh=cu; 
114. } 
115. } 
116. } 
117. page[i].onmouseup=function(){ 
118. this.style.cursor="default"; 
119. md=false; 
120. if(document.all){ 
121. this.releaseCapture(); 
122. }else{ 
123. window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
124. } 
125. flyout(this); 
126. } 
127. } 
128. } 
129.  
130. function flyout(obj){ 
131. if(obj.offsetLeft<75){ 
132. if( (obj.offsetLeft + 350 - 20) > -275 ){ 
133. obj.style.left=obj.offsetLeft + 350 - 20; 
134. window.setTimeout("flyout(id('"+obj.id+"'));",0); 
135. }else{ 
136. obj.style.left=-275; 
137. obj.style.zIndex=0; 
138. flyin(id(obj.id)); 
139. } 
140. } 
141. if(obj.offsetLeft>75){ 
142. if( (obj.offsetLeft + 350 + 20) < 1125 ){ 
143. obj.style.left=obj.offsetLeft + 350 + 20; 
144. window.setTimeout("flyout(id('"+obj.id+"'));",0); 
145. }else{ 
146. obj.style.left=1125; 
147. obj.style.zIndex=0; 
148. flyin(id(obj.id)); 
149. } 
150. } 
151. } 
152. function flyin(obj){ 
153. if(obj.offsetLeft<75){ 
154. if( (obj.offsetLeft + 350 + 20) < 425 ){ 
155. obj.style.left=obj.offsetLeft + 350 + 20; 
156. window.setTimeout("flyin(id('"+obj.id+"'));",0); 
157. }else{ 
158. obj.style.left=425; 
159. en=false; 
160. } 
161. } 
162. if(obj.offsetLeft>75){ 
163. if( (obj.offsetLeft + 350 - 20) > 425 ){ 
164. obj.style.left=obj.offsetLeft + 350 - 20; 
165. window.setTimeout("flyin(id('"+obj.id+"'));",0); 
166. }else{ 
167. obj.style.left=425; 
168. en=false; 
169. } 
170. } 
171. } 
172. </script> 

html:

1. <div> 
2. <ul> 
3. <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li> 
4. <li><span>2009-4-29 02:16</span><a href=#>啊！爱人</a></li> 
5. <li><span>2009-4-29 02:16</span><a href=#>宁静温泉</a></li> 
6. <li><span>2009-4-29 02:16</span><a href=#>你的样子</a></li> 
7. <li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li> 
8. <li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li> 
9. <li><span>2009-4-29 02:16</span><a href=#>恋曲2000</a></li> 
10. <li><span>2009-4-29 02:16</span><a href=#>亚细亚的孤儿</a></li> 
11. <li><span>2009-4-29 02:16</span><a href=#>童年</a></li> 
12. </ul> 
13. </div> 
14. <div> 
15. <ul> 
16. <li><span>2009-4-29 02:16</span><a href=#>弹唱词</a></li> 
17. <li><span>2009-4-29 02:16</span><a href=#>飞车</a></li> 
18. <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li> 
19. <li><span>2009-4-29 02:16</span><a href=#>滚滚红尘</a></li> 
20. <li><span>2009-4-29 02:16</span><a href=#>光阴的故事</a></li> 
21. <li><span>2009-4-29 02:16</span><a href=#>之乎者也</a></li> 
22. <li><span>2009-4-29 02:16</span><a href=#>现象七十二变</a></li> 
23. <li><span>2009-4-29 02:16</span><a href=#>乡愁四韵</a></li> 
24. <li><span>2009-4-29 02:16</span><a href=#>穿过你的黑发我的手</a></li> 
25. </ul> 
26. </div> 
27. <div> 
28. <ul> 
29. <li><span>2009-4-29 02:16</span><a href=#>大兵歌</a></li> 
30. <li><span>2009-4-29 02:16</span><a href=#>黄色面孔</a></li> 
31. <li><span>2009-4-29 02:16</span><a href=#>台北红玫瑰</a></li> 
32. </ul> 
33. </div> 
34. </body> 
35. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。