function stopdefault(e) {// 禁止浏览器默认行为 var e= e || event; if (e.preventdefault) { e.preventdefault(); } else { window.event.returnvalue = false; } return false; } //模拟滚动条 function imitatescrollh(scrollbox, scrollobj, scrollbar, scrollbtn) {//scrollbox被滚动对象外框,scrollobj被滚动对象,scrollbar滚动条块,滚动条按钮 this.init(scrollbox, scrollobj, scrollbar, scrollbtn); } imitatescrollh.prototype = { scale:function() {//被滚动对象与被滚动对象外框的高度比例计算 return (this.scrollobj.scrollwidth/this.scrollbox.clientwidth); }, scrollbtnmousedown:function(ev) {//滚动按钮按下 var _this = this; var disy = ev.clientx - this.scrollbtn.offsetleft;//鼠标y坐标距离滚动按钮头部的距离 var maxtop = this.scrollbar.clientwidth - this.scrollbtn.offsetwidth; document.onmousemove = function(ev) { if (document.all) {//ie 禁止选择 document.body.onselectstart = new function("return false"); } else {// chrome, ff $("body").addclass('chromeonselectstart') } var oevent = ev || event; var t = oevent.clientx - disy; t = t > maxtop ? maxtop : t; t = t < 0 ? 0 : t; _this.scrollbtn.style.left = t + "px"; //_this.scrollobj.style.left = -t / _this.scrollbar.clientwidth * _this.scrollobj.scrollwidth + "px"; _this.scrollobj.style.left = -t / (_this.scrollbar.clientwidth-_this.scrollbtn.offsetwidth) * (_this.scrollobj.scrollwidth-_this.scrollbox.clientwidth) + "px"; }; document.onmouseup = function() { if (document.all) {//ie 解除禁止选择 document.body.onselectstart = new function("return true"); } else {// chrome, ff $("body").removeclass('chromeonselectstart') } document.onmousemove = document.onmouseup = null;//清除move和up事件 }; }, scrollboxmousewheel:function(ev) {//鼠标滚轮滚动 var direct = 0; var topcur = this.scrollbtn.offsetleft; var maxtop = this.scrollbar.clientwidth - this.scrollbtn.offsetwidth; //滚轮每次滚动,滚动按钮该走的距离,测试chrome滚8次差不多一屏 var directtop = this.scrollbox.clientwidth / 8 / this.scrollobj.scrollwidth * this.scrollbar.clientwidth; directtop = directtop>0 ? math.ceil(directtop) : math.floor(directtop); stopdefault(ev);//禁止浏览器自身的滚动条滚动效果 if (ev.wheeldelta) {//ie/opera/chrome direct = ev.wheeldelta; } else if (ev.detail) {//firefox direct = ev.detail * (-1); } if(parsefloat(direct) > 0) { var topend = topcur - directtop; if (topend < 0) {topend = 0;} } else { var topend = topcur + directtop; topend = topend>maxtop ? maxtop : topend; } this.scrollbtn.style.left = topend + "px"; //this.scrollobj.style.left = -topend / this.scrollbar.clientwidth * this.scrollobj.scrollwidth + "px"; this.scrollobj.style.left = -topend / (this.scrollbar.clientwidth-this.scrollbtn.offsetwidth) * (this.scrollobj.scrollwidth-this.scrollbox.clientwidth) + "px"; }, init:function(scrollbox, scrollobj, scrollbar, scrollbtn) {//初始化 this.scrollbox = typeof scrollbox == "string" ? document.getelementbyid(scrollbox) : scrollbox; this.scrollobj = typeof scrollobj == "string" ? document.getelementbyid(scrollobj) : scrollobj; this.scrollbar = typeof scrollbar == "string" ? document.getelementbyid(scrollbar) : scrollbar; this.scrollbtn = typeof scrollbtn == "string" ? document.getelementbyid(scrollbtn) : scrollbtn; var scale = this.scale();////被滚动对象与被滚动对象外框的高度比例 if (scale <= 1) {//判断是否达到产生滚动条的条件 //this.scrollobj.style.width = "100%"; this.scrollbar.style.display = "none"; return; } else { //this.scrollobj.style.width = "95%"; this.scrollbar.style.display = "block"; } // if(_this.scrollobj.scrollwidth+_this.scrollobj.offsetleft < _this.scrollbox.clientwidth) // {//判断被滚动对象是否滚过头了 // _this.scrollobj.style.left = _this.scrollbox.clientwidth-_this.scrollobj.scrollwidth+"px"; // } //初始化滚动按钮的高度和top值 //this.scrollbtn.style.height = 20 + "px"; //设定滚动按钮的高度 //this.scrollbtn.style.left = -this.scrollobj.offsetleft/this.scrollobj.scrollwidth*this.scrollbar.clientwidth + "px"; var _this = this; this.scrollbtn.onmousedown = function(e) {//滚动按钮拖拽事件 var e = e || event; _this.scrollbtnmousedown(e); }; //绑定滚轮事件 if (this.scrollbox.addeventlistener) {//ff3.5以下 this.scrollbox.addeventlistener("dommousescroll", function(e) { var e = e || event; _this.scrollboxmousewheel(e) }, false); } //w3c this.scrollbox.onmousewheel = function(e) { var e = e || event; _this.scrollboxmousewheel(e) }; //ie/opera/chrome // $("#scrollobj").mousemove(function(e){ // // $(this).stop().animate({ // // left : - l // // }, 1000, "easeoutexpo") // var _w = $(window).width(), // _liw = _w*0.17, // _sw = _w*0.83, // _ulw = $("#scrollobj li").length*248; // var left=-1*((_ulw-_sw)/_w)*(e.pagex); // $(this).css({"left":left}); // var s = (_ulw-_sw)/_w // var l = -1*$("#scrollbar").width()*((left/(_w*s))+0.135); // $("#scrollbtn").css('left', l); // }) } }