首页 > 代码库 > 滚动条
滚动条
/**oBox滚动条 oBtn滚动条滑块 oText滑动区域 oTxt文本区域 的 class或者id*olong 滚动一次的距离*/( function($){ $.fn.myScroll = function(options){ var defaults = { //oBox滚动条 oBtn滚动条滑块 oText滑动区域 oTxt文本区域 oBox:‘right‘, oBtn:‘btn‘, oText:‘left‘, oTxt:‘in‘, olong:30 } var obj = $.extend({},defaults,options),_this=$(this); //获取对象函数 function getDom(dom){ if($(‘.‘+dom)[0]){ $dom = _this.find(‘.‘+dom); }else{ $dom = _this.find(‘#‘+dom); }; return $dom; } //获取对象 obj.oBox = getDom(obj.oBox); obj.oBtn = getDom(obj.oBtn); obj.oText = getDom(obj.oText); obj.oTxt = getDom(obj.oTxt); //滚动条的最大行程 var iMaxHeight = obj.oBox.outerHeight() - obj.oBtn.outerHeight(); //滚动条的offsettop var iBoxTop = obj.oBox.offset().top; //文本内容与外容器的高的差值 var iTxtHeight = obj.oText.outerHeight() - obj.oTxt.outerHeight(); //滚动事件开关 var dragging = false; obj.oBtn.mousedown( function (e){ //滚动事件开关打开 dragging = true; disY = e.pageY - obj.oBtn.offset().top; return false; } ); $(‘html‘).mousemove( function (e){ if(dragging == true){ $(this).css(‘cursor‘,‘pointer‘); var iTop; //控制滑块跟随鼠标 iTop = e.pageY - disY - iBoxTop; //控制滑块的范围 if(iTop<=0){iTop=0;}else if(iTop>=iMaxHeight){iTop=iMaxHeight;} obj.oBtn.css(‘top‘,iTop); //算出滑块行程与最大行程的百分比 var iScale = iTop / iMaxHeight; //控制文本按滑块行程的百分比调整top值 obj.oTxt.css(‘top‘,iScale*iTxtHeight); return false; } } ); $(‘html‘).mouseup( function(){ $(this).css(‘cursor‘,‘auto‘); //滚动事件开关关闭 dragging = false; return false; } ); //注册滚动条事件 //IE及其他浏览器注册滚轮 obj.oBox[0].onmousewheel=obj.oText[0].onmousewheel=fnWheel; //火狐注册滚轮事件 if(window.addEventListener){ obj.oBox[0].addEventListener(‘DOMMouseScroll‘, fnWheel, false); obj.oText[0].addEventListener(‘DOMMouseScroll‘, fnWheel, false); } //定义fnWheel事件 function fnWheel(e){ var e = e || event ; var iBtn; //鼠标向上或向下的判断属性 var iTop; var iScale; if(e.wheelDelta){ //IE chrome iBtn = e.wheelDelta > 0 ? true : false ; //IE大于0为向上滚为true }else{ iBtn = e.detail < 0 ? true : false; //FF小于0为向上滚为true } if(iBtn == true){ iTop = obj.oBtn.offset().top - iBoxTop - obj.olong; //滑块向上移动obj.olong }else{ iTop = obj.oBtn.offset().top - iBoxTop + obj.olong; //滑块向下移动obj.olong } if(iTop<=0){iTop=0;}else if(iTop>=iMaxHeight){iTop=iMaxHeight;} //控制滑块范围 obj.oBtn.css(‘top‘,iTop); //控制鼠标滚动时滑块位置 iScale = iTop / iMaxHeight ; //算出滑块行程百分比 obj.oTxt.css(‘top‘,iScale*iTxtHeight); //控制滚动时文本区域的top //取消滚动时浏览器默认行为 if (e.preventDefault){ e.preventDefault(); //FF }else{ window.event.returnValue = false; //IE } return false; } } })(jQuery);//去第几个lifunction _goto(opts){ var def={ i:2, L:$(‘.left‘), l:$(‘.in‘), R:$(‘.right‘), r:$(‘.btn‘), t:300 } var o = $.extend(def,opts); //滚动条的最大行程 var iMaxHeight = o.R.outerHeight() - o.r.outerHeight(); //滚动条的offsettop var iBoxTop = o.R.offset().top; //文本内容与外容器的高的差值 var iTxtHeight = o.l.outerHeight() - o.L.outerHeight(); //li的高度 var liH = o.l.find(‘li‘).outerHeight(); //计算左边行程 var long1 = o.i*liH ; long1 = long1 > iTxtHeight ? iTxtHeight : long1; o.l.animate({ top:-long1 },o.t) //计算右边行程 var long2 = long1/iTxtHeight*iMaxHeight; o.r.animate({ top:long2 },o.t);}
滚动条
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。