教学之友,学习之友。

站长教学网

当前位置: 站长教学网 > 前端开发 > JS教程 >

jquery实现自定义风格的滚动条代码(3)

时间:2012-04-09 11:39来源:未知 作者:ken 点击:

接下来就是给它添加脚本代码了。为了方便,在这里用的是jQuery库。
我决定为它建立一个对象,大致成员变量如下:
 

  1.  
  2. $( function()   
  3. {   
  4. /***对象方法,进行一些成员变量的赋值   
  5. 变量:elem:要被上下移动的工具条区域名(元素名、id和class的组合)   
  6. perHight:每一格一次被移动的长度   
  7. slideN:工具栏中工具的行数   
  8. showN:可见的工具的行数(这里是3)   
  9. speed:一次移动所花的毫秒数   
  10. index:可见区域的第一行的索引   
  11. barElem:滑动条名(元素名、id和class的组合)   
  12. ***/   
  13. function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)   
  14. {……}   
  15. toolBar.prototype=   
  16. {   
  17. /***滑动条的高度的设置   
  18. 高度计算公式:滑动条可设置的最大高度*可见的工具的行数/工具栏中工具的总行数   
  19. ***/   
  20. initBar:function()   
  21. {……},   
  22. /***工具条滑动的函数,to是要被滑动到的索引,这函数在点上下按钮或移动滑动条的时候会被触发***/   
  23. slide:function(to)   
  24. {……},   
  25. /***滑动条滑动的函数,to是要被滑动到的索引,这函数在点上下按钮的时候会被触发,和slide函数同步实现***/   
  26. barSlide:function(to)   
  27. {……},   
  28. /***本函数为上下按钮添加点击事件   
  29. upelem:向上按钮的名字(元素名、id和class的组合)   
  30. downelem:向下按钮的名字(元素名、id和class的组合)   
  31. ***/   
  32. clickTab:function(upelem,downelem)   
  33. {……},   
  34. /***拖动滑动条的函数,拖动后,工具框也进行相应移动。   
  35. elem:需要被移动的元素名(元素名、id和class的组合)   
  36. handle:使相应元素被移动所需要拖动的把柄元素名(元素名、id和class的组合)   
  37. uplev:被拖动元素最高点(这里是0)   
  38. downlev:被拖动元素的最低点(这里是196)   
  39. ***/   
  40. drag:function(elem,handle,uplev,downlev)   
  41. {……}   
  42. }   
  43. /***这里进行对象的实例化,与相关函数的调用***/   
  44. })  

完整的js代码如下:
 

  1.  
  2. $(function()   
  3. {   
  4. function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)   
  5. {   
  6. this.elem=$(elem);   
  7. this.perHeight=perHeight;   
  8. this.slideN=slideN;   
  9. this.showN=showN;   
  10. this.speed=speed;   
  11. this.index=index;   
  12. this.barElem=barElem;   
  13. }   
  14. toolBar.prototype=   
  15. {   
  16. initBar:function()   
  17. {   
  18. var tl=$(this.barElem).parent().height();   
  19. $(this.barElem).css({'height':tl*this.showN/this.slideN});   
  20. },   
  21. slide:function(to)   
  22. {   
  23. this.elem.animate({'top':-(to*this.perHeight)},this.speed)   
  24. },   
  25. barSlide:function(to)   
  26. {   
  27. var tl=$(this.barElem).parent().height();   
  28. $(this.barElem).animate({'top':tl*to/this.slideN},this.speed)   
  29. },   
  30. clickTab:function(upelem,downelem)   
  31. {   
  32. var _this=this;   
  33. $(upelem).bind('click',function()   
  34. {   
  35. if(_this.index>0)   
  36. {   
  37. _this.index--;   
  38. _this.slide(_this.index);   
  39. _this.barSlide(_this.index);   
  40. }   
  41. return false;   
  42. });   
  43. $(downelem).bind('click',function()   
  44. {   
  45. if(_this.index<_this.slideN-_this.showN)   
  46. {   
  47. _this.index++;   
  48. _this.slide(_this.index);   
  49. _this.barSlide(_this.index);   
  50. }   
  51. return false;   
  52. });   
  53. },   
  54. drag:function(elem,handle,uplev,downlev)   
  55. {   
  56. var _this=this;   
  57. var tl=$(this.barElem).parent().height();   
  58. var C=$(elem);   
  59. var dy, moveout;   
  60. var T = $(handle);   
  61. T.bind("selectstart"function()   
  62. {   
  63. return false;   
  64. });   
  65. T.mousedown(function(e)   
  66. {   
  67. //dx = e.clientX - parseInt(C.css("left"));   
  68. e=e?e:window.event;   
  69. dy = e.clientY - parseInt(C.css("top"));   
  70. C.mousemove(move).mouseout(out).css('opacity', 0.8);   
  71. T.mouseup(up);   
  72. });   
  73. function move(e)   
  74. {   
  75. e=e?e:window.event;   
  76. moveout = false;   
  77. if((e.clientY - dy)>=uplev&&(e.clientY - dy)<=(downlev-C.height()))   
  78. C.css({"top": e.clientY - dy});   
  79. }   
  80. function out(e)   
  81. {   
  82. e=e?e:window.event;   
  83. moveout = true;   
  84. setTimeout(function(){checkout(e);}, 100);   
  85. }   
  86. function up(e)   
  87. {   
  88. e=e?e:window.event;   
  89. var adaptTop;   
  90. var presTop=parseInt(C.css("top"));   
  91. C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1);   
  92. T.unbind("mouseup", up);   
  93. //alert(parseInt(_this.slideN));   
  94. if(((presTop/(tl/_this.slideN))-parseInt(presTop/(tl/_this.slideN)))>=0.5)   
  95. {   
  96. _this.index=parseInt(presTop/(tl/_this.slideN))+1;   
  97. }   
  98. else   
  99. {   
  100. _this.index=parseInt(presTop/(tl/_this.slideN));   
  101. }   
  102. adaptTop=_this.index*(tl/_this.slideN);   
  103. _this.slide(_this.index);   
  104. C.css({"top":adaptTop});   
  105. }   
  106. function checkout(e)   
  107. {   
  108. e=e?e:window.event;   
  109. moveout && up(e);   
  110. }   
  111. }   
  112. }   
  113. var slength=$("#smallTools .innerToolBox ul").length;   
  114. var stBox=new toolBar("#smallTools .innerToolBox",69,slength,3,700,0,"#smallTools .innerBar");   
  115. stBox.initBar();   
  116. stBox.clickTab("#smallTools .upBtn","#smallTools .downBtn");   
  117. stBox.drag("#smallTools .innerBar","#smallTools .innerBar",0,196);   
  118. })  

 

(责任编辑:ken)
TAG标签: jQuery 滚动条 自定义 代码 风格
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
注册登录:不允许匿名留言,登录后留言无需输入验证码。
栏目列表
最新内容