Jq-滚动条插件写法(二)

接着上次的未完的部分。

接下是对滚轮的支持。

滚轮大概可以分为这么两类：

1. Firefox

Firefox 需要添加 'DOMMouseScroll' 事件支持，并取值是使用detail 为正负30。

2. IE,Opera,Safari,Chrome

而这四类，则直接在 window.onmousewheel = document.onmousewheel = $(dom).onmousewheel = fn

取值是：正负120，

虽然这两个取值是不一样的，但含义是一样的，正为向上，负为向下。

所以：

mousewheel: function(fun){
    return this.each(function(){
        var that = this;
            that.delta = 0; //滚动方向

        if($.browser.msie || $.browser.safari){ //IE Safari
            that.onmousewheel = function(){
                that.delta = event.wheelDelta; // IE,Opera,Safari,Chrome 使用wheelDelta 只取 +-120
                event.returnValue = false;
                fun && fun.call(that); //
            }
        } else { //Firefox
            that.addEventListener('DOMMouseScroll', function(e){
                that.delta = e.detail > 0 ? -1 : 1; // Firefox 使用 detail 只取 +-3
                e.preventDefault();
                fun && fun.call(that);
            }, false);
        }
    });

}

然后根据，上面总结的特性，添加代码：

$(that).mousewheel(function(){
    if(this.delta > 0){ //如果大于零，则向上，反之向下。
        currentTop -= 15;
    } else {
        currentTop += 15;
    }
    setScrollTop();
});

然后，添加对上下按钮的支持：

View Code

//向上按钮绑定事件
jKBarTop.bind('mousedown', function(e){
    that.setBarTop('up');

    $(document).mouseup(function(){
        $(document).unbind();
        clearTimeout(scrollTopTimer);
        scrollTopSpeed = 0;
    });
});

//向下按钮绑定事件
jKBarBot.bind('mousedown', function(e){
    that.setBarTop('bot');

    $(document).mouseup(function(){
        $(document).unbind();
        clearTimeout(scrollTopTimer);
        scrollTopSpeed = 0;
    });
});

//按钮设置高度方法
that.setBarTop = function(scrollDir){
    if(scrollDir == 'up'){
        currentTop -= 15;
    } else {
        currentTop += 15;
    }
    setScrollTop();

    scrollTopSpeed += 2;
    var t = 500 - scrollTopSpeed * 50;
    t <=0 && (t = 0);

    scrollTopTimer = setTimeout(function(){
        that.setBarTop(scrollDir);
    }, t);
}

基本代码块就这么多，然后是添加风格修改，

由于css属性选择器覆盖的特性，父类可以覆盖子类的权重。所以提供其它两种风格：

/* 简单 */
.jkscroll-wrap .jkscroll-simple{width:12px;background:#f2f2f2;border-left:1px solid #dadada;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-top,.jkscroll-wrap .jkscroll-simple .jkscroll-bar-bot{display:none;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-mid{top:0;right:-2px;background:#c0c0c0;border:none 0;}
.jkscroll-wrap .jkscroll-simple .hover{background:#909090;}
/* blue */
.jkscroll-wrap .jkscroll-gray{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y right 0 #edf7fa;}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-top,.jkscroll-wrap .jkscroll-gray .jkscroll-bar-bot{background:url(http://app.soche8.com/show/jscoll/s_bg.gif);}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-mid{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y -45px 0;border:1px solid #BCBCBC;}

由此，在调用时直接可以对样式进行操作，添加 .jkscroll-simple, .jkscroll-gray 两个样式，即可更换风格。

在调用时，提供三种风格的支持：

$('.jkscroll-wrap').jikeyScrollerBar({
    pattern: 'jkscroll-simple' //简版
    //pattern: 'jkscroll-gray' //灰色
    //pattern: 'jkscroll-blue' //蓝色
});

由于想更自动化一点，外部的包装层也使用jquery提供的方向进行动态的添加：

var jkScrollWrap = this.wrapInner('<div class="jkscroll-cont"></div>'),
jkScrollCont = jkScrollWrap.append('<div class="jkscroll-bar"><div class="jkscroll-bar-top"></div><div class="jkscroll-bar-mid"></div><div class="jkscroll-bar-bot"></div></div>');

这样的话，只要对内容高度进行限定，外边的滚动条，从DOM结构到js控制都是通过插件来实现，这样增加了插件的灵活性。

那最终的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>豪情-滚动条</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><style type="text/css">
*{margin:0;padding:0;}
body{font:12px/2 arial;background:#333;}
.jk-scrolldemo{width:700px;padding:1px;margin:20px auto;border:1px solid #ccc;background:#fff;}
.jkscroll-wrap{position:relative;padding:0;height:200px;overflow:hidden;}
.jkscroll-cont{position:relative;padding-right:15px;top:0px;z-index:9999;}
.jkscroll-cont-hover{background:#FFFBE1;}
.jkscroll-text{padding:5px;}
.jkscroll-text p{margin-bottom:10px;}
.jkscroll-bar{position:absolute;top:0px;right:0px;width:15px;height:100%;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y right 0 #edf7fa;z-index:10000;}
.jkscroll-bar-top,.jkscroll-bar-bot{position:absolute;height:15px;left:0px;width:100%;cursor:pointer;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) no-repeat 0 0 #bbdef6;}
.jkscroll-bar-top{top:0px;}
.jkscroll-bar-bot{bottom:0px;background-position:0 -15px;}
.jkscroll-bar-mid{position:absolute;top:15px;width:13px;height:100px;border:1px solid #A3C3D5;background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -45px 0 #e0f1fc;}
.jkscroll-wrap .hover{background:url(http://app.soche8.com/show/jscoll/s_bg2.gif) repeat-y -58px 0 #dceffc;}
/* 简单 */
.jkscroll-wrap .jkscroll-simple{width:12px;background:#f2f2f2;border-left:1px solid #dadada;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-top,.jkscroll-wrap .jkscroll-simple .jkscroll-bar-bot{display:none;}
.jkscroll-wrap .jkscroll-simple .jkscroll-bar-mid{top:0;right:-2px;background:#c0c0c0;border:none 0;}
.jkscroll-wrap .jkscroll-simple .hover{background:#909090;}
/* blue */
.jkscroll-wrap .jkscroll-gray{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y right 0 #edf7fa;}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-top,.jkscroll-wrap .jkscroll-gray .jkscroll-bar-bot{background:url(http://app.soche8.com/show/jscoll/s_bg.gif);}
.jkscroll-wrap .jkscroll-gray .jkscroll-bar-mid{background:url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y -45px 0;border:1px solid #BCBCBC;}
</style>
</head>
<body>
<div class="jk-scrolldemo">
<div class="jkscroll-wrap">
<div class="jkscroll-text">
<p>“部长将带队50人的司局级干部调研组，深入每个省区对保障房开工率进行现场检查。”一位接近住建部的人士向记者透露，针对保障性安居工程开工“掺水”和质量问题，住建部将对地方的保障安居工程建设进行摸底调研。</p>
<p>上述人士介绍，检查方式分两步，先是市级部门自查，统计信息上报省建设厅，各省的建设厅派督察组对地方抽样检查，核实情况；再有以住建部部长姜伟新为代表的部司级领导组成的50人的督察组还将深入地方调研，确保数据的准确性。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
<p>据悉，此次督察全面遵守住建部要求的“三个开工”标准，即1/3浇筑地基、1/3超出地面、1/3主体结构完工。不达标，不计入计算开工率范畴。</p>
<p>中国房地产研究会副会长陈国强表示，按照新的开工率计算标准来核算的话，肯定有很多地方政府的项目开工率达不到要求，被挤出水分，这相当于住建部对开工率进行一次重算。</p>
<p>11月22日，由国家住房和城乡建设部部长姜伟新带队的保障性安居工程建设督察组前往宁夏考察，拉开了住建部督察各地保障性安居工程建设工作的序幕。</p>
</div>

</div>
</div>
<script type="text/javascript">
/**
   * Copyright (c) 2011 Jikeytang (http://jikey.cnblog.com/)
   * Version: 0.0.1
   * Demo: http://jikey.cnblog.com/ http://app.soche8.com/show/jscoll/
   */
/*
   * bw //按钮的宽度
      dh //容器的高度
      sch //内容的高度
      sh //滚动条的高度
      wh //滚动时候跳动幅度
   * 
   */
(function($){
      $.fn.extend({
          //滚动条插件
          jikeyScrollerBar: function(options){
              var defaults = {
                  pattern: 'blue', //默认的风格
              };
              var opts = $.extend(defaults, options);
              //添加滚动条DOM结构
              var jkScrollWrap = this.wrapInner('<div class="jkscroll-cont"></div>'),
                  jkScrollCont = jkScrollWrap.append('<div class="jkscroll-bar"><div class="jkscroll-bar-top"></div><div class="jkscroll-bar-mid"></div><div class="jkscroll-bar-bot"></div></div>');
              var jkBar = jkScrollCont.find('.jkscroll-bar'),
                  jKBarTop = jkScrollCont.find('.jkscroll-bar-top'), //顶部按钮
                  jKBarMid = jkScrollCont.find('.jkscroll-bar-mid'), //中间滚动条
                  jKBarBot = jkScrollCont.find('.jkscroll-bar-bot'), //底部按钮
                  jKCont = jkScrollCont.find('.jkscroll-cont'); //内容区域
              var currentTop = 0, //滚动条当前距顶部的高度
                  jkBarBtnWidth = jkBar.width(), //按钮的宽度、高度
                  wrapH = jkScrollCont.height(), //容器的高度
                  contH = jKCont.height(), //内容的实际高度
                  jkBarH = (wrapH - 2 * jkBarBtnWidth) * wrapH / contH, //滚动条高度
                  scrollTopTimer,
                  scrollTopSpeed = 0, //滚动速率
                  that = this;
              //风格设定
              if(opts.pattern == 'jkscroll-simple'){
                  jkBar.addClass('jkscroll-simple');
                  jkBarBtnWidth = 0;
              } else if(opts.pattern == 'jkscroll-gray'){
                  jkBar.addClass('jkscroll-gray');
              }
              //以下都是做为初始化数据
              jkBarH < 10 && (jkBarH = 10);
              jKBarMid.height(jkBarH);
              //当鼠标拖动滚动条
              jKBarMid.hover(function(){
                  $(this).addClass('hover');
              }, function(){
                  $(this).removeClass('hover');
              });
              //当鼠标在内容区域内时
              jKCont.hover(function(){
                  $(this).addClass('jkscroll-cont-hover');
              }, function(){
                  $(this).removeClass('jkscroll-cont-hover');
              });
              //如果内容高度小于等于容器的高度时，隐藏滚动条
              if(contH <= wrapH){
                  jKCont.css('padding-right', 0);
                  jkBar.hide();
              }
              //滚动条绑定事件
              jKBarMid.bind('mousedown', function(e){ //为什么要采取 delegate http://article.yeeyan.org/view/213582/179910
                  var pageY = e.pageY, //鼠标的位置
                      jkBarTop = parseInt($(this).css('top')); //中间滚动条当前的高度
                  $(document).mousemove(function(e2){
                      currentTop = jkBarTop + e2.pageY - pageY;
                      setScrollTop();
                      //拖动时取消选择文本
                      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
                  });
                  $(document).mouseup(function(){
                      $(document).unbind();
                  });
                  return false;
              });
              //向上按钮绑定事件
              jKBarTop.bind('mousedown', function(e){
                  that.setBarTop('up');
                  $(document).mouseup(function(){
                      $(document).unbind();
                      clearTimeout(scrollTopTimer);
                      scrollTopSpeed = 0;
                  });
              });
              //向下按钮绑定事件
              jKBarBot.bind('mousedown', function(e){
                  that.setBarTop('bot');
                  $(document).mouseup(function(){
                      $(document).unbind();
                      clearTimeout(scrollTopTimer);
                      scrollTopSpeed = 0;
                  });
              });
              //按钮设置高度方法
              that.setBarTop = function(scrollDir){
                  if(scrollDir == 'up'){
                      currentTop -= 15;
                  } else {
                      currentTop += 15;
                  }
                  setScrollTop();
                  scrollTopSpeed += 2;
                  var t = 500 - scrollTopSpeed * 50;
                  t <=0 && (t = 0);
                  scrollTopTimer = setTimeout(function(){
                      that.setBarTop(scrollDir);
                  }, t);
              }
              //滚动条设置高度方法
              function setScrollTop(){
                  currentTop < jkBarBtnWidth && (currentTop = jkBarBtnWidth); //防止拖出向上按钮
                  currentTop > wrapH - jkBarBtnWidth - jkBarH && (currentTop = wrapH - jkBarBtnWidth - jkBarH - 2); //防止拖出向下按钮
                  jKBarMid.css({top: currentTop}); //设置滚动条离顶的距离
                  var jkContTop = ((currentTop - jkBarBtnWidth) * contH)/(wrapH - 2 * jkBarBtnWidth);
                  jKCont.css({top: -jkContTop}); //设置内容离顶的距离
              };
              $(that).mousewheel(function(){
                  if(this.delta > 0){ //如果大于零，则向上，反之向下。
                      currentTop -= 15;
                  } else {
                      currentTop += 15;
                  }
                  setScrollTop();
              });
              return this;
          },
          //添加滚动事件
          mousewheel: function(fun){
              return this.each(function(){
                  var that = this;
                      that.delta = 0; //滚动方向
                  if($.browser.msie || $.browser.safari){ //IE Safari 
                      that.onmousewheel = function(){
                          that.delta = event.wheelDelta; // IE,Opera,Safari,Chrome 使用wheelDelta 只取 +-120
                          event.returnValue = false;
                          fun && fun.call(that); // 
                      }
                  } else { //Firefox
                      that.addEventListener('DOMMouseScroll', function(e){
                          that.delta = e.detail > 0 ? -1 : 1; // Firefox 使用 detail 只取 +-3
                          e.preventDefault();
                          fun && fun.call(that);
                      }, false);
                  }
              });
          }
      });
})(jQuery);
/**
   * 
   */
$('.jkscroll-wrap').jikeyScrollerBar({
      //pattern: 'jkscroll-simple'
      //pattern: 'jkscroll-gray'
      pattern: 'jkscroll-blue'
});
</script></body>
</html>