接着上次的未完的部分。

接下是对滚轮的支持。

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

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 两个样式，即可更换风格。

var defaults = {
    pattern: 'blue', //默认风格
};
var opts = $.extend(defaults, options);

//风格设定
if(opts.pattern == 'jkscroll-simple'){
    jkBar.addClass('jkscroll-simple');
    jkBarBtnWidth = 0;
} else if(opts.pattern == 'jkscroll-gray'){
    jkBar.addClass('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" /> <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> </body> </html>

运行代码

Jq-滚动条插件写法(二)相关推荐

  1. JQ插件写法 扩展JQ方法

    目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.cl ...

  2. Jq-滚动条插件写法(一)

    jscoll 的优点就不一一列举了,说一下缺点: 1. 众多灵活的参数配置,在灵活的背后牺牲了傻瓜操作可控性, 让一些不懂css的程序员,不懂jq的美工,咬牙切齿,遂有重写一个的想法. 2. jsco ...

  3. html自定义横纵向滚动条,详解css3自定义滚动条样式写法

    本文介绍了css3自定义滚动条样式写法,分享给大家,具体如下: 先简单介绍一下各个属性 ::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,backgrou ...

  4. 那些年我们一起追过的缓存写法(二)

    感谢园子里的同学对上一篇的支持,很高兴楼主的一些经验及想法能够对大家有一些帮助. 上次主要讨论缓存读写这块各种代码实现,本篇就上次的问题继续来,看看那些年折腾过的各种缓存做法. 阅读目录: 缓存预热 ...

  5. 利用jquery的qrcode.js插件生成二维码的两种方式的使用

    2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...

  6. 15个带示例的jQuery滚动条插件

    1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...

  7. jQuery插件：Tiny Scrollbar滚动条插件（滚动条美化、默认滚动条）

    Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小. 插件特点: 支持iPhone, iPad, Android 新版1.8,可以在移动设备上滚动内容 ...

  8. JavaScript滚动条插件源码

    这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表 ...

  9. vuejs滚动条_VUE滚动条插件——vue-happy-scroll

    最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue的滚动条插件.最开始用的是Easy-sc ...

最新文章

  1. 甩锅！偷懒！PUA！转嫁压力！铲除异己！压榨下属！这就是职场leader真面目！...
  2. python测试rabbitmq的消息收发
  3. Windows命令：查看端口占用状况，杀掉进程
  4. python爬虫编程100例_哪种Python程序员最赚钱？爬虫数据告诉你！
  5. 编写代码的若干个基本规则(以Java为例)
  6. php类模块引擎PDO操作MySQL数据库简单阐述
  7. HTML元素title里面如何换行
  8. 前端学习（2994）：vue+element今日头条管理--初始化目录结构
  9. java 反射 代码_java反射机制学习代码
  10. 支持拼音检索的TextBox扩展控件-使用
  11. 搭建大数据分析平台的必要性
  12. ADODB.Stream 错误 '800a0bb9' 参数类型不正确，或不在可以接受的范围之内，或与其他参数冲突
  13. 一个最简单的Delphi2010的PNG异形窗口方法
  14. 服务熔断降级什么意思？
  15. 表格边框不显示怎么办
  16. 【C++入门】静态成员详解（定义、实现原理、使用注意事项）
  17. Js数组里删除指定的元素（不是指定的位置）
  18. 50款可以替代桌面软件的在线服务
  19. 大数据开发工程师目录
  20. 特色图像尺寸css,Wordpress 3.2.1特色图像尺寸和裁剪(Wordpress 3.2.1 Featured Image Size and Crop)...

热门文章

  1. Mysql学习之优化篇
  2. “同声传译”的难度有多大？
  3. 苹果笔记本能装linux系统吗,为什么很多人买了苹果笔记本后，会重新装一个windows系统？...
  4. Windows Presentation Foundation 用户指南
  5. unity PC端 调用FFmpeg生成视频 unity序列帧合成视频
  6. 【面试题】面试题Redis
  7. 售价低10%-15% 专业家电网购“挑战”传统连锁（转载中国新闻网）
  8. 游戏中支线任务的设计Pt.1: 如龙0——海量支线搭建起来的不夜城
  9. 手把手教你Nodejs获取微信小程序二维码
  10. Java面试java基础，重庆java哪家培训班好