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);
}
});
}
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();
});
if(this.delta > 0){ //如果大于零,则向上,反之向下。
currentTop -= 15;
} else {
currentTop += 15;
}
setScrollTop();
});
然后,添加对上下按钮的支持:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//向上按钮绑定事件
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);
}
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-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');
}
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' //蓝色
});
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>');
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控制都是通过插件来实现,这样增加了插件的灵活性。
那最终的代码如下: