找回密码
 注册加入

扫一扫,极速登录

QQ登录

只需一步,快速开始

搜索
查看: 5811|回复: 0

转一个滑动的效果

[复制链接]
发表于 2012-7-12 07:10:42 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>滑动效果类</title>
  6. <STYLE>
  7. body {
  8. background-color: #EEEEEE;
  9. margin: 0px;
  10. text-align: center;
  11. }
  12. #wrap {
  13. width: 736px;
  14. background-color: #FFFFFF;
  15. overflow: hidden;
  16. margin: 12px;
  17. padding: 12px;
  18. }
  19. #topcontainer {
  20. height: 80px;
  21. width: 732px;
  22. background-color: #99FF66;
  23. border: 1px solid #79F200;
  24. }
  25. #bodycontainer {
  26. height: 400px;
  27. width: 100%;
  28. margin-top: 12px;
  29. }
  30. #bottomcontainer {
  31. height: 60px;
  32. width: 100%;
  33. margin-top: 12px;
  34. }
  35. #topwrap {
  36. width: 100%;
  37. }
  38. #leftcontainer {
  39. background-color: #99FF66;
  40. height: 400px;
  41. width: 120px;
  42. float: left;
  43. border: 1px solid #79F200;
  44. }
  45. input {
  46. background-color: #99FF66;
  47. border-top-width: 1px;
  48. border-right-width: 1px;
  49. border-bottom-width: 1px;
  50. border-left-width: 1px;
  51. border-top-style: solid;
  52. border-right-style: solid;
  53. border-bottom-style: solid;
  54. border-left-style: solid;
  55. border-top-color: #79F200;
  56. border-right-color: #79F200;
  57. border-bottom-color: #79F200;
  58. border-left-color: #79F200;
  59. line-height: 28px;
  60. background-position: center;
  61. height: 30px;
  62. }
  63. </STYLE>
  64. </head>
  65. <body>


  66. <div id="wrap">
  67. <div align="left" style="margin-bottom:3px">
  68. <input type="button" id="showtop" onclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="展开顶部"/>
  69. <input type="button" id="hidetop" value="关闭顶部" onclick="topslider.hide();this.style.display='none';document.getElementById('showtop').style.display='';" style="display:none"/>
  70. </div>
  71. <div id="topwrap">
  72. <div id="topcontainer" style="display:none"></div>
  73. </div>
  74. <div id="bodycontainer">
  75. <div id="leftcontainer" style="display:none">





  76. </div>
  77. <div align="left">
  78. <input type="button" id="showleft" value="展开左侧" onclick="leftslider.show();this.style.display='none';document.getElementById('hideleft').style.display='';"/>
  79. <input type="button" id="hideleft" value="关闭左侧" onclick="leftslider.hide();this.style.display='none';document.getElementById('showleft').style.display='';" style="display:none"/>
  80. </div>
  81. </div>
  82. <div id="bottomcontainer"></div>
  83. </div>
  84. <script language="JavaScript" type="text/javascript">
  85. slider.names = new Array();
  86. function slider()
  87. {
  88. this.id = slider.names.length;
  89. slider.names[this.id] = this;
  90. this.target = document.getElementById(arguments[0]); //第一个参数:被操作div的id
  91. this.direction = arguments[1];//第二个参数:div弹出的方向
  92. this.height = arguments[2];//第三个参数:div的高度
  93. this.width = arguments[3];//第四个参数:div的宽度
  94. this.step = arguments[4];//第五个参数:希望动作分解为几步完成
  95. this.timer = 10 * arguments[5];//第六个参数:每个动作的间隔时间,10ms为一个单位
  96. this.startopa = arguments[6];//第七个参数:div开始的透明度
  97. this.sparent = this.target.parentNode;//获取操作div的父容器
  98. this.intervalid = null;//循环定时的id
  99. this.i = 0;//循环的计数器
  100. this.status = 0;//slider层的状态:0-可以展开;1-不可以展开
  101. this.target.style.display = "none";//先将div隐去
  102. return this;
  103. }
  104. slider.prototype.initialize = function()
  105. {
  106. this.sparent.style.overflow = "hidden";//设置父容器overflow
  107. this.target.style.width = Number(this.width) + 'px';//设置目标div的宽度
  108. this.target.style.height = Number(this.height) + 'px';//设置目标div的高度
  109. this.target.style.position = "";//设置目标div的定位方式
  110. this.target.style.display = "";//设置目标div的显示方式
  111. this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')';//设置目标div的透明度为初始透明度
  112. this.target.style.overflow = "hidden";//设置overflow
  113. switch(this.direction)//根据弹出方向设定div的margin
  114. {
  115. case 1://left to right
  116. this.target.style.marginLeft = "-" + this.width + "px";
  117. break;
  118. case 2://top to bottom
  119. this.target.style.marginTop = "-" + this.height + "px";
  120. break;
  121. case 3://right to left
  122. this.target.style.marginRight = "-" + this.width + "px";
  123. break;
  124. }
  125. }
  126. slider.prototype.show = function()
  127. {
  128. if (this.status==0)//检查状态是否已经展开
  129. {
  130. this.initialize();//操作div及其父容器的初始化
  131. this.intervalid = window.setInterval("slider.names["+this.id+"].cycle()",this.timer);//设置动作循环
  132. }
  133. }
  134. slider.prototype.hide = function()
  135. {
  136. if (this.status==1)//检查状态是否已经展开
  137. {
  138. this.intervalid = window.setInterval("slider.names["+this.id+"].decycle()",this.timer);//设置动作循环
  139. }
  140. }
  141. slider.prototype.cycle = function() //单步循环动作
  142. {
  143. var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
  144. var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5);//计算每步增加的透明度
  145. var nopa = Number(opa) + Number(opastep);//当前透明度
  146. if (nopa>100){this.target.style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
  147. switch(this.direction)//根据弹出方向计算和设定div的动作
  148. {
  149. case 1: //left to right
  150. var opx = this.target.style.marginLeft.split("px")[0];
  151. var pxstep = Math.round((this.width / this.step)+0.5);
  152. var npx = Number(opx) + Number(pxstep);
  153. if (npx>0){this.target.style.marginLeft = '0px';}else{this.target.style.marginLeft = String(npx) + 'px';}
  154. break;
  155. case 2: //top to bottom
  156. var opx = this.target.style.marginTop.split("px")[0];
  157. var pxstep = Math.round((this.height / this.step)+0.5);
  158. var npx = Number(opx) + Number(pxstep);
  159. if (npx>0){this.target.style.marginTop = '0px';}else{this.target.style.marginTop = String(npx) + 'px';}
  160. break;
  161. case 3: //right to left
  162. var opx = this.target.style.marginRight.split("px")[0];
  163. var pxstep = Math.round((this.width / this.step)+0.5);
  164. var npx = Number(opx) + Number(pxstep);
  165. if (npx>0){this.target.style.marginRight = '0px';}else{this.target.style.marginRight = String(npx) + 'px';}
  166. break;
  167. }
  168. this.i++ //计数器+1
  169. if (this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;} //循环完毕,清除循环定时
  170. }
  171. slider.prototype.decycle = function() //单步循环动作
  172. {
  173. var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
  174. var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5)*2;//计算每步增加的透明度
  175. var nopa = Number(opa) - Number(opastep);//当前透明度
  176. if (nopa<this.startopa){this.target.style.filter = 'Alpha(opacity=' + this.startopa + ')';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
  177. switch(this.direction)//根据弹出方向计算和设定div的动作
  178. {
  179. case 1: //left to right
  180. var opx = this.target.style.marginLeft.split("px")[0];
  181. var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
  182. var npx = Number(opx) - Number(pxstep);
  183. if (Math.abs(npx)>this.width+2){this.target.style.marginLeft = '-' + this.width + 'px';}else{this.target.style.marginLeft = String(npx) + 'px';}
  184. break;
  185. case 2: //top to bottom
  186. var opx = this.target.style.marginTop.split("px")[0];
  187. var pxstep = Math.round((this.height / Math.round(this.step*0.5))+0.5);
  188. var npx = Number(opx) - Number(pxstep);
  189. if (Math.abs(npx)>this.height+2){this.target.style.marginTop = '-' + this.height + 'px';}else{this.target.style.marginTop = String(npx) + 'px';}
  190. break;
  191. case 3: //right to left
  192. var opx = this.target.style.marginRight.split("px")[0];
  193. var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
  194. var npx = Number(opx) - Number(pxstep);
  195. if (Math.abs(npx)>this.width+2){this.target.style.marginRight = '-' + this.width + 'px';}else{this.target.style.marginRight = String(npx) + 'px';}
  196. break;
  197. }
  198. this.i++ //计数器+1
  199. if (this.i>(Math.round(this.step*0.5)-1)){window.clearInterval(this.intervalid);this.i=0;this.status=0;this.target.style.display = "none";} //循环完毕,清除循环定时
  200. }
  201. //关于如何使用这个代码的说明:
  202. //上面的代码可以封装成为一个单独的js文件,然后包含在页面当中
  203. //然后使用下面的代码进行slider初始化,一个页面可以使用多个slider,下面的代码必须在页面底部</body>之前,否则可能会报错
  204. var topslider = new slider('topcontainer',2,80,734,20,2,20);
  205. var leftslider = new slider('leftcontainer',1,398,120,20,1,20);
  206. //参数分别代表的意义可以在代码顶端看到
  207. //控制slider动作可以使用两种方式
  208. //一种是使用下面声明的名字调用,比如topslider.show(),topslider.hide()
  209. //另一种可以使用slider.names[0].show(),slider.names[0].hide(),下标取决于slider初始化的顺序
  210. </script>
  211. </body>
  212. </html>
  213. <!--
  214. Slider类的功能说明:&#402;、可以控制任何一个页面上存在的div&#8222;、slider在滑动的同时还可以实现透明度的变化,整个过程更平滑、更美观…、可控性强,通过多个参数实现不同大小的div不同方向、不同速度的滑动&#8224;、调用方便,一句话即可初始化,slider的隐现控制更为简单,详情参见代码例子
  215. Slider类的调用说明:
  216. //关于如何使用这个代码的说明:
  217. //上面的代码可以封装成为一个单独的js文件,然后包含在页面当中
  218. //然后使用下面的代码进行slider初始化,一个页面可以使用多个slider,下面的代码必须在页面底部</body>之前,否则可能会报错
  219. var topslider = new slider('topcontainer',2,80,734,20,2,20);
  220. var leftslider = new slider('leftcontainer',1,398,120,20,1,20);
  221. //参数分别代表的意义可以在代码顶端看到
  222. //控制slider动作可以使用两种方式
  223. //一种是使用初始化时声明的名字调用,比如topslider.show(),topslider.hide()
  224. //另一种可以使用slider.names[0].show(),slider.names[0].hide(),下标取决于slider初始化的顺序
  225. -->
复制代码
您需要登录后才可以回帖 登录 | 注册加入  

本版积分规则

Archiver|手机版|小黑屋|Discuz!扩展中心 - 杭州富迪文化艺术策划有限公司 版权所有 ( 浙ICP备14042422号-1 )|网站地图QQ机器人

GMT+8, 2024-7-12 21:20 , Processed in 0.171792 second(s), 10 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表