当前位置：Gxlcms > JavaScript > JS+CSS实现的拖动分页效果实例

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

时间：2021-07-01 10:21:17 帮助过：6人阅读

本文实例讲述了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程序设计有所帮助。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！