(function(win){
var doc = win.document,db = doc.body;
var mousewheel = win.document,db = doc.body;
var mousewheel = 文件中的 'onmousewheel' ? 'mousewheel' ? 'mousheel' 🎜 > var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};
skyScroll.prototype = { init:function ( opts){
var set = _extend({
dir:'top',
width:500,
回調：函數(){}
},opts||{});
.target = _$(set.target)
this; .parent = this.target.parentNode;
this.width = set.width; .dir;
this.callback = set.callback ;
this.addWarpper(set.dir);
this.addVscroll();
休息中；
this.addLscroll();
休息中；
this.addVscroll();
this.addLscroll();
};
_addEvent(doc,'mousedown',function(e){
);
if(target == _this.vScroll || target == _this.lScroll){
pos.tLeft = parseInt(_this.target.style .left); 🎜> mousemoveHandle = _mo usemoveHandle.call(_this,pos,目標);
_addEvent(doc,'mousemove',mousemoveHandle);
Event(doc,'mousemove',mousemoveHandle)}); }; 🎜> = _this.vScrollOuter || 目標== _this.lScrollOuter){
_mounsedownHandle. 🎜> });
},
//外部提供重新計算捲軸高度或寬度以及滾動範圍的方法，用於動態改變內容時，請做相對應的調整
var H = this.target.offsetHeight,W = this.target.offsetWidth,T = parseInt(this.target.style.top),L = parseInt(this.target.style.left),h,w;
this.ratio = {l:this.width / W,v:this.height / H};
this.range = {l:W-this.width, t: H - this.height};
if(this.vScroll){
h = Math.round(Math.pow(this/height h = Math.round(Math.pow)/height
this.vScroll.style.height = h 'px';
this.vScroll.style.top = Math.round(this.height * (-T/H)) 'px';
this.range.st = this.height - h;
this.wrapper.style.height = this.height 'px';
};
if(this.lScroll){
this.lScroll.style.width = w 'px';
this.lScroll.style.left = Math.round(this.width * (-L/W)) 'px';
this.range.sl = this.width - w;
this.wrapper.style.width = this.width 'px';
};
},
//对外提供设置滚动条的位置的方法
set:function(pos){
if(!_isObject(pos)) throw new Error('参数类型错误，参数必须是object!');
if(pos.top && !isNaN(parseInt(pos.top)) && this.vScroll){
var top = Math.min(pos.top,this.range.t);
this.target.style.top = -top + 'px';
this.vScroll.style.top = Math.round(this.height * (top / this.target.offsetHeight)) + 'px';
};
if(pos.left && !isNaN(parseInt(pos.left)) && this.lScroll){
var left = Math.min(pos.left,this.range.l);
this.target.style.left = -left + 'px';
this.lScroll.style.left = Math.round(this.width * (left / this.target.offsetWidth)) + 'px';
};
},
addWarpper:function(dir){
if(this.wrapper) return;
var _this = this,W = this.target.offsetWidth,H = this.target.offsetHeight,mousewheelHandle;
this.wrapper = _createEl('
',this.parent);
this.wrapper.appendChild(this.target);
this.target.style.cssText = 'position:absolute;top:0;left:0';
switch(dir){
case 'top':
this.wrapper.style.height = this.height + 'px';
this.wrapper.style.width = W + 'px';
break;
case 'left':
this.wrapper.style.height = H + 'px';
this.wrapper.style.width = this.width + 'px';
break;
default :
this.wrapper.style.width = this.width + 'px';
this.wrapper.style.height = this.height + 'px';
};
_addEvent(this.wrapper,'mouseenter',function(e){
var pos = {};
pos.tTop = parseInt(_this.target.style.top);
pos.tLeft = parseInt(_this.target.style.left);
if(_this.vScroll) pos.sTop = parseInt(_this.vScroll.style.top);
if(_this.lScroll) pos.sLeft = parseInt(_this.lScroll.style.left);
mousewheelHandle = _mousewheelHandle.call(_this,pos);
_addEvent(_this.wrapper,'mousewheel',mousewheelHandle);
_addEvent(_this.wrapper,'mouseleave',function(){_removeEvent(_this.wrapper,'mousewheel',mousewheelHandle)});
});
},
//对外提供添加竖向滚动条的方法
addVscroll:function(){
if(this.vScroll) return;
!this.wrapper && this.addWarpper('top');
this.vScrollOuter = _createEl('
',this.wrapper)
this.vScroll = _createEl('
',this.wrapper);
this.recalculated();
},
//对外提供添加横向滚动条的方法
addLscroll:function(){
if(this.lScroll) return;
!this.wrapper && this.addWarpper('left');
this.lScrollOuter = _createEl('
',this.wrapper)
this.lScroll = _createEl('
',this.wrapper);
this.recalculated();
} tion(){
_deleteScroll.call(this, 1,this.vScroll,this.vScrollOuter,this.lScroll,this.lScrollOuter ）；
},
//刪除橫向的捲> _deleteScroll.call(this ,0,this.lScroll,this.lScrollOuter,this.vScroll,this.vScrollOuter) ;
}
};
roll = skyScroll;
/*************************私有函數*************************/
function _mousemoveHandle(pos,target){
函數(e){
e = e ||視窗.事件;
.style.top = Math.min(0,Math.max(pos .tTop (pos.y - newPos.y)/_this.ratio.v,-_this.range.t)) 'px ';
target.style.top = Math.max(0,Math.min(pos .sTop - pos.y newPos.y,_this.range.st)) 'px';
_this.callback.call(_this); }:function(e){
e = e ||視窗.事件;
var newPos = _getMousePos(e); Math.min(0,Math.max(pos.tLeft (pos.x - newPos.x)/_this.ratio.l,-_this.range.l)) 'px ';
target.style.left = Math.max(0,Math.min(pos.sLeft - pos.sLeft - pos.Left newPos.x,_this.range.sl)) 'px';
_this.callback.call(_this);
🎜> };
function _mousewheelHandle(pos){
var _this = this;
返回this.vScroll ？函數(e){
e = e ||視窗.事件;
wheelDelta /120 : -e.detail/3;
var top = parseInt(_this.target.style.top);
var dist = 資料* 5;
_this.target.style .top = Math.min(0,Math.max(top dist / _this.ratio.v, -_this.range.t)) 'px';
_this.vScroll.style.top = Math.max(0 _this.vScroll.style.top = Math.max(0 _this.vScroll.style.top = Math.max(0 ,Math.min(sTop-dist,_this.range.st)) 'px';
_this.callback.call(_this);
_this.callback.call(_this);
:function(e){
e = e ||窗口.事件;
_stopEvent(e);
var data = e.wheelDelta ? e.wheelDelta /120 : -e.detail/3;
var left = parseInt(_this.target.style.left);
var sLeft = parseInt(_this.lScroll.style.left);
var dist = 資料 * 5;
_this.target.style.left = Math.min(0,Math.max(left dist / _this.ratio.l, -_this.range.l)) 'px';
_this.lScroll.style.left = Math.max(0,Math.min(sLeft-dist,_this.range.sl)) 'px';
_this.callback.call(_this);
}
};
function _mounsedownHandle(pos,target){
var _this = this;
var elPos = _getElementPosition(target);
if(target == this.vScrollOuter){
console.log(pos.y - elPos.y);
_this.set({
}else{
_this.set({
});
};
};
function _deleteScroll(n,s1,s11,s2,s22){
var o = n ? '高度' : '寬度' ,s = n ? '頂' : '左';
if(!s1) 回傳；
this.wrapper.removeChild(s1);
this.wrapper.removeChild(s11);
n ？
if(!s2){
this.wrapper.parentNode.appendChild(this.apptarget);
this.wrapper.parentNode.removeChild(this.wrapper);
this.target.style.cssText = '';
this.wrapper = null;
}else{
this.wrapper.style[o.toLowerCase()] = this.target['offset' o] 'px';
this.recalculated();
};
this.target.style[s] = '0px';
//this.target.style[o.toLowerCase()]= 'auto';
};
/*************************工具函數*************************/
function _$(id){
return typeof id === 'string' ? doc.getElementById(id) : id;
};
function _extend(target,source){
for(var key in source) target[key] = source[key];
回目標；
};
function _createEl(html,parent){
var div = doc.createElement('div');
div.innerHTML = html;
el = div.firstChild;
父級 && 父級.appendChild(el);
回 el;
};
function _getMousePos(e){
if(e.pageX || e.pageY) return {x:e.pageX,y:e.pageY};
return {
x:e.clientX document。documentElement.scrollLeft ument.documentElement.scrollTop - document.body.clientTop
};
};
function _isObject(o){
return o === Object(o);
};
function _getElByClass(node,oClass,parent){
var re = [],els,parent = 父級 ||文件
for(var i=0,len=els.length;i
if((' ' els[i]..className 'Class'. ; -1) re.push(els[i]);
};
再回；
};
函數 _stopEvent(e){
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
e.preventDefault ? e.preventDefault() :(e.returnValue = false);
};
function _addEvent(el,type,fn){
if(typeof el.addEventListener != 'undefine el.addEventListener('滑鼠懸停',_findElement(fn),false);
}else if(type === 'mouseleave'){
}else{
時使用中使用);
}
}else if(typeof el.attachEvent!= '
}else{
el['on' type] = fn;
}
};
function _removeEvent(el,type,fn){
if(typeof el.removeEventListener !=
}else if(typeof el.detachEvent != 'undefined'){
el.detachfn('on' type,);
}else{
el['on' type] = null;
}
};
function _findElement(fn){
return function(e){
while(parent &&parent != this)parent =parent.parentNode;
if(parent != this) fn.call(this,e);
}
};
function _cancelSelect(){
if (window.getSelection) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
}
}else if (document.selection) { // IE？
}
};
function _getElementPosition(el){
var x = 0,y=0;
if(el.getBoundingClientRect){
var pos = el.getBoundingClientRect();
var d_root = document.documentElement,db = document.body;
x = pos.left Math.max(d_root.scrollLeft,db.scrollLeft) - d_root.clientLeft;
y = pos.top Math.max(d_root.scrollTop,db.scrollTop) - d_root.clientTop;
}else{
while(el != db){
y = el.offsetTop;
el = el.offsetParent;
};
};
return {
x:x,
};
})(視窗);
