524 lines
17 KiB
JavaScript
524 lines
17 KiB
JavaScript
/**
|
||
* Created by Administrator on 2017/9/6.
|
||
*/
|
||
|
||
|
||
//Vertical and horizontal
|
||
/**
|
||
* 用div的拖拽以及滚动事件代替了滚动条，通过改变div的样式来改变滚动条的样式
|
||
*/
|
||
|
||
;(function($){
|
||
$.fn.extend({
|
||
"scrollBar":function(options){
|
||
var settings = {
|
||
barWidth:5,
|
||
position:"x,y",
|
||
wheelDis:15
|
||
|
||
};
|
||
|
||
options = $.extend(settings,options);
|
||
|
||
var horizontalDiv = '<div class="zl-scrollBarBox" style="width:100%;left:0;height:'+settings.barWidth+'px;bottom:0;">'+
|
||
'<div class="zl-scrollBar zl-horizontalBar" style="height:'+settings.barWidth+'px;border-radius:'+settings.barWidth/2+'px;"></div>'+
|
||
'</div>';
|
||
var verticalDiv = '<div class="zl-scrollBarBox" style="height:100%;top:0;width:'+settings.barWidth+'px;right:0;">'+
|
||
'<div class="zl-scrollBar zl-verticalBar" style="width:'+settings.barWidth+'px;border-radius:'+settings.barWidth/2+'px;"></div>'+
|
||
'</div>';
|
||
|
||
var T = this;
|
||
|
||
/**
|
||
* 将每个div的padding值保存到自定义属性中
|
||
*/
|
||
|
||
T.each(function(){
|
||
|
||
$(this).attr("paddingR",$(this).css("padding-right")).attr("paddingB",$(this).css("padding-bottom"));
|
||
|
||
});
|
||
/**
|
||
*
|
||
*创建滚动条的函数
|
||
*/
|
||
function creatScrollBar(obj){
|
||
|
||
var This = $(obj).get(0);//转化为JS对象，增加运行效率
|
||
|
||
var paddingR = parseFloat($(obj).attr("paddingR"));
|
||
var paddingB = parseFloat($(obj).attr("paddingB"));
|
||
|
||
$(obj).css({
|
||
"padding-right":paddingR+"px",
|
||
"padding-bottom":paddingB+"px",
|
||
"overflow":"hidden"
|
||
});
|
||
|
||
//获取内容的总高度和总宽度
|
||
|
||
|
||
if(!($(obj).children().hasClass("zl-scrollContentDiv"))){
|
||
$(obj).wrapInner('<div class="zl-scrollContentDiv"></div>');
|
||
};
|
||
|
||
if($(obj).css("position")=="static"){
|
||
$(obj).css({"position":"relative"});
|
||
};
|
||
|
||
var scrollContentDiv = $(obj).find(".zl-scrollContentDiv");
|
||
|
||
var scrollH = scrollContentDiv[0].scrollHeight;
|
||
var scrollW = scrollContentDiv[0].scrollWidth;
|
||
|
||
var innerH = scrollContentDiv.height();
|
||
var innerW = scrollContentDiv.width();
|
||
var outerH = $(obj).innerHeight();
|
||
var outerW = $(obj).innerWidth();
|
||
|
||
function addVerticalBar(a){
|
||
|
||
This.style.paddingRight = paddingR + 'px';
|
||
|
||
innerH = $(a).height();
|
||
|
||
var barHeight = outerH*(innerH/scrollH);
|
||
|
||
$(a).find(".zl-scrollBarBox").remove().end().append(verticalDiv).find(".zl-verticalBar").height(barHeight);
|
||
|
||
};
|
||
function addHorizontalBar(a){
|
||
|
||
This.style.paddingBottom = paddingB + settings.barWidth + 'px';
|
||
innerW = $(a).width();
|
||
|
||
var barWidth = outerW*(innerW/scrollW);
|
||
|
||
$(a).find(".zl-scrollBarBox").remove().end().append(horizontalDiv).find(".zl-horizontalBar").width(barWidth);
|
||
|
||
};
|
||
|
||
switch (settings.position){
|
||
|
||
case "x,y":
|
||
|
||
if(scrollH>innerH && scrollW>innerW){
|
||
This.style.paddingRight = paddingR + settings.barWidth + 'px';
|
||
innerH = $(obj).height();
|
||
outerH = $(obj).innerHeight();
|
||
|
||
var barHeight = (outerH-settings.barWidth)*((innerH-settings.barWidth)/scrollH);
|
||
if(!($(obj).find(".zl-verticalBar").length)){
|
||
$(obj).append(verticalDiv);
|
||
};
|
||
|
||
$(obj).find(".zl-verticalBar").height(barHeight).parent().height(outerH-settings.barWidth);
|
||
|
||
|
||
This.style.paddingBottom = paddingB + settings.barWidth + 'px';
|
||
innerW = $(obj).width();
|
||
|
||
var barWidth = (outerW-settings.barWidth)*((innerW-settings.barWidth)/scrollW);
|
||
|
||
if(!($(obj).find(".zl-horizontalBar").length)){
|
||
$(obj).append(horizontalDiv);
|
||
};
|
||
$(obj).find(".zl-horizontalBar").width(barWidth).parent().width(outerW)
|
||
.css({
|
||
"padding-right":settings.barWidth+"px",
|
||
"box-sizing":"border-box"
|
||
});
|
||
|
||
}else if(scrollH>innerH){
|
||
|
||
addVerticalBar(obj);
|
||
|
||
|
||
}else if(scrollW>innerW){
|
||
|
||
addHorizontalBar(obj);
|
||
|
||
}else{
|
||
$(obj).find(".zl-scrollBarBox").remove();
|
||
$(obj).find(".zl-scrollContentDiv").css("top","0px").css("left","0px");
|
||
}
|
||
break;
|
||
|
||
case "x":
|
||
|
||
if(scrollW>innerW){
|
||
|
||
addHorizontalBar(obj);
|
||
|
||
}else{
|
||
$(obj).find(".zl-scrollBarBox").remove();
|
||
$(obj).find(".zl-scrollContentDiv").css("left","0px");
|
||
}
|
||
break;
|
||
|
||
case "y":
|
||
|
||
if(scrollH>innerH){
|
||
|
||
addVerticalBar(obj);
|
||
|
||
}else{
|
||
$(obj).find(".zl-scrollBarBox").remove();
|
||
$(obj).find(".zl-scrollContentDiv").css("top","0px");
|
||
}
|
||
|
||
break;
|
||
};
|
||
|
||
|
||
}
|
||
|
||
/**
|
||
* 循环给每一个Div添加
|
||
*/
|
||
function recycleThis(){
|
||
|
||
T.each(function(){
|
||
|
||
creatScrollBar(this);
|
||
|
||
});
|
||
};
|
||
|
||
recycleThis();//执行循环
|
||
|
||
/**
|
||
*创建监听div内容变化的定时器
|
||
*/
|
||
|
||
function creatTimer(obj,oldWidth,oldHeight,oldInnerWidth,oldInnerHeight,timer){
|
||
|
||
timer = setInterval(function(){
|
||
|
||
var newWidth = null;
|
||
var newHeight = null;
|
||
var newInnerWidth = null;
|
||
var newInnerHeight = null;
|
||
var topDiv = null;
|
||
var leftDiv = null;
|
||
var topBar = null;
|
||
var leftBar = null;
|
||
var scrollContentDiv = $(obj).find(".zl-scrollContentDiv");
|
||
|
||
if(scrollContentDiv.length){
|
||
newWidth = scrollContentDiv[0].scrollWidth;
|
||
newHeight = scrollContentDiv[0].scrollHeight;
|
||
|
||
newInnerWidth = scrollContentDiv.width();
|
||
newInnerHeight = scrollContentDiv.height();
|
||
}else{
|
||
newWidth = $(obj)[0].scrollWidth - parseFloat($(obj).css("padding-left"));
|
||
newHeight = $(obj)[0].scrollHeight - parseFloat($(obj).css("padding-top"));
|
||
newInnerWidth = $(obj).width();
|
||
newInnerHeight = $(obj).height();
|
||
|
||
};
|
||
|
||
if(newWidth!=oldWidth || newHeight!=oldHeight || newInnerWidth!=oldInnerWidth || newInnerHeight!=oldInnerHeight){
|
||
|
||
//记录更新滚动条长短前的位置
|
||
if(scrollContentDiv.length){
|
||
topDiv = parseFloat(scrollContentDiv.css("top"));
|
||
leftDiv = parseFloat(scrollContentDiv.css("left"));
|
||
};
|
||
if($(obj).find(".zl-verticalBar").length){
|
||
topBar = parseFloat($(obj).find(".zl-verticalBar").css("top"));
|
||
};
|
||
if($(obj).find(".zl-horizontalBar").length){
|
||
leftBar = parseFloat($(obj).find(".zl-horizontalBar").css("left"));
|
||
};
|
||
//更新滚动条长短或有无
|
||
creatScrollBar(obj);
|
||
|
||
if($(obj).find(".zl-scrollBarBox").length){
|
||
if(topDiv){
|
||
var maxTopBox = scrollContentDiv[0].scrollHeight - $(obj).height();
|
||
var maxLeftBox = scrollContentDiv[0].scrollWidth - $(obj).width();
|
||
if(-leftDiv>maxLeftBox){
|
||
leftDiv = -maxLeftBox;
|
||
}
|
||
if(-topDiv>maxTopBox){
|
||
topDiv = -maxTopBox;
|
||
}
|
||
scrollContentDiv.css({
|
||
"left":leftDiv+'px',
|
||
"top":topDiv+'px'
|
||
});
|
||
};
|
||
//将原来的位置赋值给现在的滚动条
|
||
if(topBar && $(obj).find(".zl-verticalBar").length){
|
||
var verticalBar = $(obj).find(".zl-verticalBar");
|
||
var maxTop = verticalBar.parent().height() -verticalBar.height();
|
||
|
||
if(topBar>maxTop){
|
||
topBar = maxTop;
|
||
}
|
||
verticalBar.css("top",topBar+'px');
|
||
};
|
||
if(leftBar && $(obj).find(".zl-horizontalBar").length){
|
||
var horizontalBar = $(obj).find(".zl-verticalBar");
|
||
var maxLeft = horizontalBar.parent().width() -horizontalBar.width();
|
||
|
||
if(leftBar>maxLeft){
|
||
leftBar = maxLeft;
|
||
}
|
||
|
||
$(obj).find(".zl-horizontalBar").css("left",leftBar+'px');
|
||
};
|
||
}
|
||
|
||
oldWidth = newWidth;
|
||
oldHeight = newHeight;
|
||
|
||
oldInnerHeight = newInnerHeight;
|
||
oldInnerWidth = newInnerWidth;
|
||
}
|
||
|
||
},100);
|
||
|
||
|
||
}
|
||
|
||
/**
|
||
* 通过循环给每一个div添加上监听内容变化的定时器
|
||
*/
|
||
function addTimer(){
|
||
$.each(T,function(k,v){
|
||
|
||
var obj = v;
|
||
var timer = "timer"+k;
|
||
var oldWidth = null;
|
||
var oldHeight = null;
|
||
var oldInnerWidth = null;
|
||
var oldInnerHeight = null;
|
||
|
||
if($(v).find(".zl-scrollContentDiv").length){
|
||
oldWidth = $(v).find(".zl-scrollContentDiv")[0].scrollWidth ;
|
||
oldHeight = $(v).find(".zl-scrollContentDiv")[0].scrollHeight;
|
||
oldInnerWidth = $(v).find(".zl-scrollContentDiv").width();
|
||
oldInnerHeight = $(v).find(".zl-scrollContentDiv").height();
|
||
|
||
}else{
|
||
oldWidth = $(obj)[0].scrollWidth - parseFloat($(obj).css("padding-left"));
|
||
oldHeight = $(obj)[0].scrollHeight - parseFloat($(obj).css("padding-top"));
|
||
|
||
oldInnerWidth = $(obj).width();
|
||
oldInnerHeight = $(obj).height();
|
||
}
|
||
creatTimer(obj,oldWidth,oldHeight,oldInnerWidth,oldInnerHeight,timer);
|
||
});
|
||
}
|
||
addTimer();
|
||
function clearTimer(){
|
||
$.each(T,function(index,item){
|
||
var timer = "timer"+index;
|
||
clearInterval(timer);
|
||
});
|
||
};
|
||
/**
|
||
* 滚动条拖拽效果
|
||
*/
|
||
this.on("mousedown",".zl-scrollBar",function(ev){
|
||
|
||
clearTimer();//清除定时器
|
||
|
||
var direction = null;
|
||
|
||
if($(this).hasClass("zl-verticalBar")){
|
||
|
||
direction = "0";
|
||
|
||
}else if($(this).hasClass("zl-horizontalBar")){
|
||
|
||
direction = "1";
|
||
|
||
}
|
||
|
||
var This = $(this).get(0);
|
||
|
||
var height = $(this).parent().height() - $(this).height();
|
||
var width = $(this).parent().width() - $(this).width();
|
||
|
||
var contentDiv = $(this).parent().parent().find(".zl-scrollContentDiv").get(0);
|
||
|
||
var scrollH = contentDiv.scrollHeight;
|
||
var innerH = $(this).parent().parent().height();
|
||
|
||
var scrollW = contentDiv.scrollWidth;
|
||
var innerW = $(this).parent().parent().width();
|
||
|
||
|
||
var ev = ev || event;
|
||
|
||
var disY = ev.clientY - This.offsetTop;
|
||
var disX = ev.clientX - This.offsetLeft;
|
||
|
||
var topCount = null;
|
||
var leftCount = null;
|
||
|
||
switch (direction){
|
||
|
||
case "0":
|
||
|
||
document.onmousemove = function(ev){
|
||
|
||
var ev = ev || event;
|
||
|
||
if(ev.clientY - disY <= 0){
|
||
|
||
topCount = 0;
|
||
|
||
}else
|
||
|
||
if((ev.clientY - disY) >= height){
|
||
|
||
topCount = height;
|
||
|
||
}else{
|
||
|
||
topCount = ev.clientY - disY;
|
||
|
||
}
|
||
|
||
This.style.top = topCount + "px";
|
||
|
||
contentDiv.style.top = -(topCount*(scrollH - innerH)/height) + 'px';
|
||
|
||
};
|
||
|
||
break;
|
||
|
||
case "1":
|
||
|
||
document.onmousemove = function(ev){
|
||
|
||
var ev = ev || event;
|
||
|
||
if(ev.clientX - disX <= 0){
|
||
|
||
leftCount = 0;
|
||
|
||
}else
|
||
|
||
if((ev.clientX - disX) >= width){
|
||
|
||
leftCount = width;
|
||
|
||
}else{
|
||
|
||
leftCount = ev.clientX - disX;
|
||
|
||
}
|
||
|
||
This.style.left = leftCount + "px";
|
||
|
||
contentDiv.style.left = -(leftCount*(scrollW - innerW)/width) + 'px';
|
||
|
||
};
|
||
|
||
break;
|
||
|
||
}
|
||
|
||
document.onmouseup = function(){
|
||
|
||
document.onmousemove = null;
|
||
document.onmouseup = null;
|
||
|
||
addTimer();//添加定时器
|
||
|
||
};
|
||
|
||
return false;
|
||
});
|
||
|
||
/**
|
||
*鼠标滚轮效果
|
||
*/
|
||
|
||
function fn(ev,a){
|
||
if(a.find(".zl-verticalBar").length){
|
||
|
||
var b = true;
|
||
var height = a.find(".zl-scrollBarBox").height() - a.find(".zl-scrollBar").height();
|
||
var contentDiv = a.find(".zl-scrollContentDiv").get(0);
|
||
var scrollH = contentDiv.scrollHeight;
|
||
var innerH = a.height();
|
||
|
||
if(ev.wheelDelta){
|
||
b = ev.wheelDelta>0?true:false;
|
||
}else{
|
||
b = ev.detail<0?true:false;
|
||
}
|
||
|
||
var topDis = parseFloat(a.find(".zl-scrollBar").css("top"));
|
||
|
||
if(b){
|
||
|
||
topDis -= settings.wheelDis;
|
||
|
||
if(topDis <0){
|
||
|
||
topDis = 0;
|
||
|
||
}
|
||
|
||
}else{
|
||
|
||
topDis += settings.wheelDis;
|
||
|
||
if(topDis > height){
|
||
|
||
topDis = height;
|
||
|
||
}
|
||
}
|
||
|
||
a.find(".zl-scrollBar").get(0).style.top = topDis + "px";
|
||
a.find(".zl-scrollContentDiv").get(0).style.top = -(topDis*(scrollH - innerH)/height) + 'px';
|
||
|
||
}
|
||
};
|
||
|
||
|
||
T.each(function(){
|
||
|
||
var oDiv = $(this).get(0);
|
||
|
||
if(oDiv.addEventListener){
|
||
|
||
oDiv.addEventListener("DOMMouseScroll",function(ev){
|
||
|
||
var ev = ev || event;
|
||
var $This = $(this);
|
||
|
||
fn(ev,$This);
|
||
|
||
ev.preventDefault();
|
||
|
||
},false);
|
||
|
||
}
|
||
|
||
oDiv.onmousewheel = function(ev){
|
||
|
||
var ev = ev || event;
|
||
var $This = $(this);
|
||
|
||
fn(ev,$This);
|
||
|
||
return false;
|
||
};
|
||
|
||
});
|
||
|
||
return this;
|
||
}
|
||
|
||
});
|
||
})(jQuery); |