wheel.zip

;(function($){ var bol,yT; function Wheel(obj){ var self=this; this.obj=obj; this.scroll_content=obj.find('.scroll_content'); this.scroll_main=this.scroll_content.find('.scroll_main'); this.roll=obj.find('.roll'); this.roll_kuai=this.roll.find('.roll_kuai'); //默认配置参数 this.setStyle(); this.contentMax=this.scroll_main.height()-this.scroll_content.height(); this.rollMax=this.roll.height()-this.roll_kuai.height(); this.top(); //初始高度 yT=this.roll_kuai.position().top; //拖拽 this.roll_kuai.bind("mousedown",function(e){ self.mousedown(e); $(document).bind("mousemove",function(e){ self.mousemove(e); }); $(document).bind("mouseup",function(){ $(document).unbind("mousedown"); $(document).unbind("mousemove"); }) self.clear(e); }); //点击 this.roll_kuai.on("click",function(e){ if (e.cancelBubble) { e.cancelBubble=true; } else{ return false; } }); this.roll.on("click",function(e){ self.click(e); }); //键盘 // $(document).on("keydown",this.obj,function(e){ // self.keys(e); // }) //滚轮 if(navigator.userAgent.indexOf("Firefox")>=0){ this.obj.off().on("DOMMouseScroll",function(e){ self.wheel(e); }) }else{ this.obj.off().on("mousewheel",function(e){ self.wheel(e); }) } }; Wheel.prototype={ // //roll_kuai样式 setStyle:function(){ var scale=this.scroll_content.height()/this.scroll_main.height(); var h=scale*this.roll.height(); if (h<50) { h=50 }else if (h>this.roll.height()) { h=this.roll.height(); this.scroll_main.css({ "top":0 }) } this.roll_kuai.css({ height:h }) }, top:function(){ if(this.roll_kuai.height()+this.roll_kuai.position().top>this.roll.height()){ this.roll_kuai.css({ "top":this.rollMax }); this.scroll_main.css({ "top":-this.contentMax }) } }, //拖动 move:function(){ if (this.scroll_content.height()<this.scroll_main.height()) { if (yT<0) { yT=0 }else if(yT>this.rollMax){ yT=this.rollMax; } this.roll_kuai.css("top",yT); var scale1=yT/this.rollMax; this.scroll_main.css("top",-scale1*this.contentMax) } }, mousedown:function(e){ this.y=e.clientY-this.roll_kuai.position().top; }, mousemove:function(e){ yT=e.clientY-this.y; this.move(); this.clear(e); }, click:function(e){ var dd=this.roll.offset().top; var tt=$("html").scrollTop()||$('body').scrollTop(); var tr=$('body').scrollTop(); yT=e.clientY+tt-dd-this.roll_kuai.height()/2; this.move(); }, keys:function(e){ switch(e.keyCode){ case 38: yT-=10; break; case 40: yT+=10; break; } this.move(); this.clear(e); }, wheel:function(e){ if (e.originalEvent.wheelDelta) { bol=e.originalEvent.wheelDelta>0?true:false; } else{ bol=e.originalEvent.detail<0?true:false; } if (!bol) { yT+=10; } else{ yT-=10; } this.move(); if(navigator.userAgent.indexOf("MSIE 8.0")==-1){ //如果不是ie8 if ((this.roll_kuai.position().top==0&&bol)||(this.roll_kuai.position().top>=this.roll.height()-this.roll_kuai.height()&&!bol)) { } else{ this.clear(e); } }else{ this.clear(e); } }, clear:function(e){ if (e.preventDefault) { e.preventDefault(); } else{ return false; } } }; //window["Wheel"]=Wheel; $.fn.wheel=function(){ var obj=$(this); return new Wheel(obj); } })(jQuery);