新航路师徒学院

 找回密码
 立即注册
搜索
查看: 328|回复: 0

【新航路】竖着滚动js 源代码

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 12:24:19 | 显示全部楼层 |阅读模式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title>竖着滚动条</title>
  6. <meta name="description" content="竖着滚动条"/>
  7. <meta name="keywords" content="竖着滚动条"/>
  8. <link rel="stylesheet" href="../css/index.css">
  9. <style>
  10. .k_scroll_father {width:600px;height:600px;border:1px solid #ccc;margin:10px auto;overflow:hidden;}
  11. .k_s_con {line-height:28px;padding:10px;}
  12. .k_bar_parent {width:10px;background:#ccc;position:absolute;right:0;top:0;display:none;z-index:10;}
  13. .k_bar {width:10px;background:blue;position:absolute;right:0;top:0;}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="k_scroll_father pr" id="k_parent">
  18.         <div class="k_s_con pa" id="k_con">
  19.                 1鲜花经验值:当前为 1, 完成今日上限还需93朵鲜花<br/>
  20.                 2礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  21.                 3鲜花经验值:当前为 1, 完成今日上限还需93朵鲜花<br/>
  22.                 4礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  23.                 5鲜花经验值:当前为 1, 完成今日上限还需93朵鲜花<br/>
  24.                 6礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  25.                 37礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  26.                 38礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  27.                 39礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  28.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  29.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  30.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  31.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  32.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  33.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  34.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  35.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  36.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  37.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  38.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  39.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  40.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  41.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  42.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  43.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  44.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  45.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  46.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  47.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  48.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  49.                 40礼物经验值:当前为 0, 完成今日上限还需5940呱币<br/>
  50.                 41礼物经验值:当前为 0, 完成今日上限还需5940呱币
  51.         </div>
  52. </div>
  53. <input type="button" value="点击" id="k_btn"/>
  54. <script src="../js/Q_web.js"></script>
  55. <script>
  56. function ScrollBar(oParent,oContent){
  57.         this.oConFather = _Q.Q(oParent)[0];
  58.         this.oCon = _Q.Q(oContent)[0];
  59.         this.oBar = document.createElement('div');
  60.         this.oOpt = document.createElement('div');
  61.         this.oA = document.getElementById('k_btn');
  62.         this.oBar.className='k_bar_parent';
  63.         this.oOpt.className='k_bar';
  64.         this.oBar.appendChild(this.oOpt);
  65.         this.oConFather.appendChild(this.oBar);
  66.         this.scale = 0;
  67.         this.disY = 0;
  68.         this.it = 0;
  69.         this.bDown = true;
  70.         this.timer = null;
  71.         var _this = this;
  72.         clearInterval(this.timer)
  73.         _Q.addEvent(this.oConFather,'mousewheel',function(ev){
  74.                 _this.mouseFn(ev);
  75.         });
  76.         _Q.addEvent(this.oConFather,'DOMMouseScroll',function(ev){
  77.                 _this.mouseFn(ev);
  78.         });
  79.         _Q.addEvent(this.oOpt,'mousedown',function(ev){
  80.                 _this.downFn(ev);
  81.                 return false;
  82.         });
  83.         _Q.addEvent(this.oA,'click',function(){
  84.                 _this.create();
  85.         });
  86.         this.timer = setInterval(function(){
  87.                 _this.optFn();
  88.         },200);
  89. }
  90. ScrollBar.prototype.mouseFn = function(ev){
  91.         var oEvent = ev || event;
  92.         var _this = this;
  93.         this.bDown = oEvent.wheelDelta ? oEvent.wheelDelta<0 : oEvent.detail>0;
  94.         if(this.bDown){
  95.                 _this.setTop(this.oOpt.offsetTop+10);
  96.         }else {
  97.                 _this.setTop(this.oOpt.offsetTop-10);
  98.         }
  99.         if(oEvent.preventDefault){
  100.                 oEvent.preventDefault();
  101.         }
  102.         return false;
  103. }
  104. ScrollBar.prototype.downFn = function(ev){
  105.         var oEvent = ev || event;
  106.         var _this = this;
  107.         this.disY = oEvent.clientY-this.oOpt.offsetTop;
  108.         if(this.oOpt.setCapture){
  109.                 this.oOpt.onmousemove = function(ev){
  110.                         _this.fnMove(ev);
  111.                 };
  112.                 this.oOpt.onmouseup = function(){
  113.                         _this.fnUp(this);
  114.                 };
  115.                 this.oOpt.setCapture();
  116.         }else {
  117.                 document.onmousemove = function(ev){
  118.                         _this.fnMove(ev);
  119.                 };
  120.                 document.onmouseup = function(){
  121.                         _this.fnUp(this);
  122.                 };
  123.         }
  124.         return false;
  125. }
  126. ScrollBar.prototype.fnMove = function(ev){
  127.         var oEvent = ev || event;
  128.         this.it = oEvent.clientY - this.disY;
  129.         var _this = this;
  130.         _this.setTop(this.it);
  131. }
  132. ScrollBar.prototype.fnUp = function(o){
  133.         o.onmousemove = o.onmouseup = null;
  134.         if(o.releaseCapture){
  135.                 o.releaseCapture();
  136.         }
  137. }
  138. ScrollBar.prototype.setTop = function(iTop){
  139.         var _this = this;
  140.         if(iTop<0){
  141.                 iTop = 0;
  142.         }else if(iTop > this.oBar.offsetHeight-this.oOpt.offsetHeight){
  143.                 iTop = this.oBar.offsetHeight-this.oOpt.offsetHeight;
  144.         }
  145.         this.oOpt.style.top = iTop + 'px';
  146.         this.scale = iTop/(this.oBar.offsetHeight-this.oOpt.offsetHeight);
  147.         this.oCon.style.top = -(this.oCon.offsetHeight-this.oConFather.offsetHeight)*this.scale+'px';//内容上移高度
  148.         //_Q.startMove(_this.oCon,{top:-parseInt((_this.oCon.offsetHeight-_this.oConFather.offsetHeight)*_this.scale)})
  149. }
  150. ScrollBar.prototype.optFn = function(){
  151.         this.scaleSizeY = this.oConFather.offsetHeight/this.oCon.offsetHeight;
  152.         this.iHeight = this.oConFather.offsetHeight;
  153.         this.oBar.style.height = this.oConFather.offsetHeight+'px';//根据内容区,来显示滚动条高度
  154.         this.oOpt.style.height = (this.oConFather.offsetHeight/this.oCon.offsetHeight)*this.oConFather.offsetHeight+'px';//根据内容区,来显示滑动条高度
  155.         if(this.oOpt.offsetHeight<=50){//判断如果滑动条小于50时,则一直以50px高显示
  156.                 this.oOpt.style.height = '50px';
  157.         }else{
  158.                 this.oOpt.style.height = this.scaleSizeY*this.iHeight+'px';
  159.         }
  160.         if(this.oCon.offsetHeight<=this.oConFather.offsetHeight){//判断 是否显示滚动条
  161.                 this.oBar.style.display = 'none';
  162.         }else {
  163.                 this.oBar.style.display = 'block';
  164.         }       
  165. }
  166. ScrollBar.prototype.create = function(){
  167.         var oDi = document.createElement('div');
  168.         oDi.innerHTML = '这是什么这是什么'+'<br/>';
  169.         this.oCon.appendChild(oDi);
  170. }
  171. var p1 = new ScrollBar('#k_parent','#k_con');
  172. </script>
  173. </body>
  174. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-7-19 02:33 , Processed in 0.157688 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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