JS+CSS实现的拖动分页效果实例

这篇文章主要介绍了JS+CSS实现的拖动分页效果,可实现鼠标拖动页面翻转到上一页或下一页的功能,涉及javascript操作页面元素与css样式的相关技巧,需要的朋友可以参考下

本文实例讲述了JS+CSS实现拖动分页效果的方法。分享给大家供大家参考。具体实现方法如下：

1. <html> 
2. <head> 
3. <title>拖动分页</title> 
4. <meta http-equiv=Content-Type content="text/html; charset=utf-8"> 
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. </style> 
56. </head> 
57. <body onselectstart="return false;"> 
58. <script> 
59. function id(obj){ 
60. return document.getElementById(obj); 
61. } 
62. var page; 
63. var lm,mx; 
64. var md=false; 
65. var sh=0; 
66. var en=false; 
67. window.onload=function(){ 
68. page=document.getElementsByTagName("div"); 
69. if(page.length>0){ 
70. page[0].style.zIndex=2; 
71. } 
72. for(i=0;i<page.length;i++){ 
73. page[i].className="page"; 
74. page[i].innerHTML+="<span class=/"tip/">第 "+(i+1)+"/"+page.length+" 页 提示：左右拖拽翻页</span>"; 
75. page[i].id="page"+i; 
76. page[i].i=i; 
77. page[i].onmousedown=function(e){ 
78. if(!en){ 
79. if(!e){e=e||window.event;} 
80. lm=this.offsetLeft; 
81. mx=(e.pageX)?e.pageX:e.x; 
82. this.style.cursor="w-resize"; 
83. md=true; 
84. if(document.all){ 
85. this.setCapture(); 
86. }else{ 
87. window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
88. } 
89. } 
90. } 
91. page[i].onmousemove=function(e){ 
92. if(md){ 
93. en=true; 
94. if(!e){e=e||window.event;} 
95. var ex=(e.pageX)?e.pageX:e.x; 
96. this.style.left=ex-(mx-lm)+350; 
97. if(this.offsetLeft<75){ 
98. var cu=(this.i==0)?page.length-1:this.i-1; 
99. page[sh].style.zIndex=0; 
100. page[cu].style.zIndex=1; 
101. this.style.zIndex=2; 
102. sh=cu; 
103. } 
104. if(this.offsetLeft>75){ 
105. var cu=(this.i==page.length-1)?0:this.i+1; 
106. page[sh].style.zIndex=0; 
107. page[cu].style.zIndex=1; 
108. this.style.zIndex=2; 
109. sh=cu; 
110. } 
111. } 
112. } 
113. page[i].onmouseup=function(){ 
114. this.style.cursor="default"; 
115. md=false; 
116. if(document.all){ 
117. this.releaseCapture(); 
118. }else{ 
119. window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
120. } 
121. flyout(this); 
122. } 
123. } 
124. } 
125. function flyout(obj){ 
126. if(obj.offsetLeft<75){ 
127. if( (obj.offsetLeft + 350 - 20) > -275 ){ 
128. obj.style.left=obj.offsetLeft + 350 - 20; 
129. window.setTimeout("flyout(id('"+obj.id+"'));",0); 
130. }else{ 
131. obj.style.left=-275; 
132. obj.style.zIndex=0; 
133. flyin(id(obj.id)); 
134. } 
135. } 
136. if(obj.offsetLeft>75){ 
137. if( (obj.offsetLeft + 350 + 20) < 1125 ){ 
138. obj.style.left=obj.offsetLeft + 350 + 20; 
139. window.setTimeout("flyout(id('"+obj.id+"'));",0); 
140. }else{ 
141. obj.style.left=1125; 
142. obj.style.zIndex=0; 
143. flyin(id(obj.id)); 
144. } 
145. } 
146. } 
147. function flyin(obj){ 
148. if(obj.offsetLeft<75){ 
149. if( (obj.offsetLeft + 350 + 20) < 425 ){ 
150. obj.style.left=obj.offsetLeft + 350 + 20; 
151. window.setTimeout("flyin(id('"+obj.id+"'));",0); 
152. }else{ 
153. obj.style.left=425; 
154. en=false; 
155. } 
156. } 
157. if(obj.offsetLeft>75){ 
158. if( (obj.offsetLeft + 350 - 20) > 425 ){ 
159. obj.style.left=obj.offsetLeft + 350 - 20; 
160. window.setTimeout("flyin(id('"+obj.id+"'));",0); 
161. }else{ 
162. obj.style.left=425; 
163. en=false; 
164. } 
165. } 
166. } 
167. </script> 
168. <div> 
169. <ul> 
170. <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li> 
171. <li><span>2009-4-29 02:16</span><a href=#>啊！爱人</a></li> 
172. <li><span>2009-4-29 02:16</span><a href=#>宁静温泉</a></li> 
173. <li><span>2009-4-29 02:16</span><a href=#>你的样子</a></li> 
174. <li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li> 
175. <li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li> 
176. <li><span>2009-4-29 02:16</span><a href=#>恋曲2000</a></li> 
177. <li><span>2009-4-29 02:16</span><a href=#>亚细亚的孤儿</a></li> 
178. <li><span>2009-4-29 02:16</span><a href=#>童年</a></li> 
179. </ul> 
180. </div> 
181. <div> 
182. <ul> 
183. <li><span>2009-4-29 02:16</span><a href=#>弹唱词</a></li> 
184. <li><span>2009-4-29 02:16</span><a href=#>飞车</a></li> 
185. <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li> 
186. <li><span>2009-4-29 02:16</span><a href=#>滚滚红尘</a></li> 
187. <li><span>2009-4-29 02:16</span><a href=#>光阴的故事</a></li> 
188. <li><span>2009-4-29 02:16</span><a href=#>之乎者也</a></li> 
189. <li><span>2009-4-29 02:16</span><a href=#>现象七十二变</a></li> 
190. <li><span>2009-4-29 02:16</span><a href=#>乡愁四韵</a></li> 
191. <li><span>2009-4-29 02:16</span><a href=#>穿过你的黑发我的手</a></li> 
192. </ul> 
193. </div> 
194. <div> 
195. <ul> 
196. <li><span>2009-4-29 02:16</span><a href=#>大兵歌</a></li> 
197. <li><span>2009-4-29 02:16</span><a href=#>黄色面孔</a></li> 
198. <li><span>2009-4-29 02:16</span><a href=#>台北红玫瑰</a></li> 
199. </ul> 
200. </div> 
201. </body> 
202. </html> 

希望本文所述对大家的javascript程序设计有所帮助。