多款模拟滚动条效果 JS+CSS实现代码

　　这是烈火小编从网上转过来的。做了些修改，其实写的比较糟糕(我指的是构造) 我用的是以前的一个drag类在这个基础上在的来完成的Slider ，其实这样代码产生些了冗余.......不如单独写个Slider类做为第一个版本还是保存起来有时间的话试着单独的写个Slider类

　　以下为实例代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>多款模拟滚动条效果 JS+CSS实现代码 - Liehuo.Net</title><br /> <style type="text/css"><br /> /*<br /> 本特效来自烈火网　http://www.veryhuo.com<br /> */<br /> #container {<br /> height:200px;_height:198px;width:385px;border:1px solid #CCCCCC;<br /> }<br /> #container #content{<br /> height:200px;width:370px;float:left;overflow:hidden;<br /> }<br /> #container #content div{<br /> margin-top:4px;margin-left:4px;height:16px;font-size:14px;color:#666666;width:100%;<br /> }<br /> #container #scroll{<br /> height:200px;width:15px;float:right;<br /> }<br /> .b1{width:600px; height:23px; background-image:url(/uploads/allimg/100312/171203276_p.gif)}<br /> /*=========================================================*/<br /> #container1 {<br /> height:200px;width:400px;_width:398px;border:1px solid #999999;<br /> }<br /> #container1 #content1{<br /> height:180px;width:400px;overflow:hidden;<br /> }<br /> #container1 #content1 td{<br /> height:180px;width:200px;<br /> }<br /> #container1 #content1 td img{<br /> height:180px;width:200px;<br /> }<br /> #container1 #scroll1{<br /> height:20px;width:400px;<br /> }<br /> #container1 #scroll1 #block1{<br /> width:20px;height:20px;background-color:#990000;position:absolute;<br /> }<br /> /*====================================================================*/<br /> table div{height:20px; font-size:13px; margin-top:5px; color:#333333; font-weight:bold}<br /> table img{height:160px; width:200px;}<br /> /*====================================================================*/<br /> .b2{background-image:url(/uploads/allimg/100312/103129203_p.gif); width:26px; height:34px;}<br /> .b2-1{background:transparent url(/uploads/allimg/100312/103129125_p.gif) no-repeat scroll center center; width:20px; height:161px; margin-left:4px;}<br /> .b2-2{background-image:url(/uploads/allimg/100312/103129000_p.gif); height:22px; width:20px; position:absolute}<br /> .b2-3{background-image:url(/uploads/allimg/100312/103128390_p.gif); width:26px; height:34px;}<br /> /*====================================================================*/<br /> .b3{ width:840px; height:216px;border:2px solid #b50000;}<br /> .b3-1{width:740px; height:216px; margin:0 auto; }<br /> .b3-2{height:180px; width:100%; overflow:hidden;}<br /> .b3-l1{height:auto; width:660px;margin:0 auto;}<br /> .b3-l2{font-size:0px; background-image:url(/uploads/allimg/100312/232151437_p.gif); height:20px; width:30px; background-position:-182px 0px; float:left; }<br /> .b3-l3{font-size:0px; background-image:url(/uploads/allimg/100312/232151437_p.gif);height:20px; width:600px; background-position:0px -226px; float:left;}<br /> .b3-l4{background-image:url(/uploads/allimg/100312/232151437_p.gif); height:20px; width:162px; background-position:-14px 0px; position:absolute}<br /> .b3-l5{font-size:0px; background-image:url(/uploads/allimg/100312/232151437_p.gif); height:20px; width:30px; background-position:-216px 0px; float:left;}<br /> /*====================================================================*/<br /> .b4-1{font-size:0px; height:17px; width:15px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:-15px 0; margin:0px;}<br /> .b4-2{font-size:0px; height:166px; width:15px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:-30px 0; }<br /> .b4-3{font-size:0px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:-45px 0; position:absolute; height:17px; width:15px; }<br /> .b4-4{font-size:0px; height:17px; width:15px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:0 0;margin:0px;}<br /> /*====================================================================*/<br /> .b5-1{background:url(/uploads/allimg/100312/111957390_p.jpg) no-repeat; width:550px; height:520px; padding:1px;}<br /> .b5-2{height:350px; width:300px; margin-left:50px; margin-top:50px;}<br /> .b5-3{ margin-top:10px; margin-left:5px; height:330px; width:260px; font-size:14px;; color:#054c68; float:left; overflow:hidden}<br /> .b5-4{font-size:16px; font-weight:bold}<br /> .b5-5{float:right; margin-right:12px; margin-top:10px; height:330px; width:15px; }<br /> .b5-6{position:absolute; height:10px; line-height:10px; width:15px; background-color:#c6e7f4;}<br /> </style><br /> </head><br /> <body style=" padding:30px; margin:0px;"><br /> <br><br /> <div id='a1' class="b1" ><br /> <img id='block1' src='/uploads/allimg/100312/171041823_p.gif' style="position: absolute; margin-top:3px;"><br /> </div><br /> <div id='info1'>0%</div><br /> <br><br /> <div><br /> <div class="b2"></div><br /> <div id="a2" class="b2-1"><br /> <div id='block2' class="b2-2"></div><br /> </div><br /> <div class="b2-3"></div><br /> </div><br /> <div id='info2'>0%</div><br /> <br><br /> <div class="b3"><br /> <div id="a3" class="b3-1"><br /> <div class="b3-2"><br /> <table width="1680" height="180" border="0" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td width="210" align="center"><br /> <img src='/uploads/Common/images/liehuo_net_m0.jpg'><br /> </td><br /> <td width="210" align="center"><br /> <img src="/uploads/Common/images/liehuo_net_m1.jpg"><br /> </td><br /> <td width="210" align="center"><br /> <img src="/uploads/Common/images/liehuo_net_m2.jpg"><br /> </td><br /> <td width="210" align="center"><br /> <img src="/uploads/Common/images/liehuo_net_m3.jpg"><br /> </td><br /> <td width="210" align="center"><br /> <img src="/uploads/Common/images/liehuo_net_m4.jpg"><br /> </td><br /> <td width="210" align="center"><br /> <img src="/uploads/Common/images/liehuo_net_m5.jpg"><br /> </td><br /> <td width="210" align="center"><br /> <img src="/uploads/Common/images/liehuo_net_m6.jpg"><br /> </td><br /> <td width="210" align="center"><br /> <img src="/uploads/Common/images/liehuo_net_m7.jpg"><br /> </td><br /> </tr><br /> </table><br /> </div><br /> <div class="b3-l1"><br /> <div id='la' class="b3-l2"></div><br /> <div id="scroll3" class="b3-l3"><br /> <div id ="block3" class="b3-l4"></div><br /> </div><br /> <div id='r' class="b3-l5"></div><br /> </div><br /> </div><br /> </div><br /> <br><br /> <div id="container"><br /> <div id="content"><br /> <div>人族</div><br /> <div>SKY流--强大的中国选手人皇sky的成名绝技</div><br /> <div>KUA流--多不兵配合MK,前期可谓遇佛神通杀</div><br /> <div>3法流--好象只是很好打兽族,打精灵还得配合小炮</div><br /> <div>骑士狮鸠流--配合圣骑的3级光环全防心灵之火,绝对bug</div><br /> <div>飘逸流--3蛋的成名绝技,首发圣骑,打得亡灵一般没的脾气</div><br /> <div>机械流--飞机加坦克,曾经风靡一时,moon也吃亏无数</div><br /> <div>万精油--3发+火枪+小炮,不变应万变的打法</div><br /> <div>兽族</div><br /> <div>跑狼骑--狼骑的高速移动,城攻与网,拆家起来无人能敌</div><br /> <div>速飞龙--比较投机的打法,一旦投机成功,对方可以直接gg</div><br /> <div>黑白牛--配合撒满,高攻,高防,高攻速,高血,无限复活</div><br /> <div>白牛海--适合内战,无限复活且20的攻击打兽身上2倍加成</div><br /> <div>XXXX流--猎头+巫医+撒满,orc时代的bug,如今很难看到</div><br /> <div>万精油--大G+狼骑+白牛+科多,最常规的打法</div><br /> <div>不死族</div><br /> <div>蜘蛛流--蜘蛛的高功,加上不死英雄的强大魔法,强</div><br /> <div>冰甲蜘蛛流--主要对抗兽族,让蜘蛛,亡骑更难打.</div><br /> <div>西瓜流--中国天灾Ted的成名绝技,女妖给兵套个盾,象西瓜</div><br /> <div>天地双鬼--有段时间一直被精灵认为是bug.</div><br /> <div>胖子毁灭--高攻,高防,高血,且无视魔法效果</div><br /> <div>骷髅海--可以看到满天的骷髅大军(驱散法师小精灵完克)</div><br /> <div>精灵族</div><br /> <div>女猎流1--NEvsNE,一般虎MM配合大量女猎,全是MM.</div><br /> <div>女猎流2--NEvsHUM,SM女王配合大量女猎克制人族速矿</div><br /> <div>吹风流--曾经的兽族客星,华丽,飘逸,==</div><br /> <div>大树流--很多很多大树配合很多很多的ac,场面壮观</div><br /> <div>弩车流--基本只有耳闻没见过</div><br /> <div>乱矿流--Moon的成名绝技,一个矿被拆了,2个矿起来了</div><br /> <div>三远流--ACMM+鹿MM+得鲁伊大叔,把任何物体射成马蜂窝</div><br /> </div><br /> <div id="scroll"><br /> <div id='p1' class="b4-1"></div><br /> <div id="scroll4" class="b4-2"><br /> <div id="block4" class="b4-3"> </div><br /> </div><br /> <div id='p2' class="b4-4"></div><br /> </div><br /> </div><br /> <br><br /> <div class="b5-1"><br /> <div id='con1' class="b5-2"><br /> <div id='ccc1' class="b5-3"><br /> 　　<span class="b5-4">1.身世</span><br><br /> 　　我爱罗是第四代风影之子，也是手鞠和勘九郎的弟弟。<br><br /> 　　当他出世时，因为砂隐忍者村资金短缺，在他的父亲的指示下，一尾守鹤被封印在我爱罗的体内，目的是为了让他成为保护村庄的强大武器。忧郁的<br><br /> 　　由于这样做需要作出牺牲，我爱罗的母亲因此成了牺牲品。<br><br /> 　　我爱罗由他的舅父夜叉丸养大，并由他的父亲传授忍术。由于我爱罗具备守鹤的可怕力量，村子的人憎恨和惧怕他。<br><br /> 　　夜叉丸是唯一关照他的人，也只有夜叉丸了解我爱罗的心里其实并不想伤害任何人。可是他的父亲第四代风影并不这么想，他一直视我爱罗为村庄的一个巨大威胁。<br /> 　　于是第四代风影不断地派杀手刺杀我爱罗，可是没有一次成功。最后第四代风影只好叫夜叉丸下手。夜叉丸执行命令时死在我爱罗的手上。当我爱罗发现来杀他的杀手竟然是夜叉丸时感到异常震惊和悲伤。夜叉丸死前将真相告诉我爱罗，其实他从来就没有喜欢过我爱罗。他这样做只是希望能够为他的姐姐（我爱罗的母亲）报仇。夜叉丸把许多炸药绑在身上，希望和我爱罗同归于尽。由于砂子的保护，我爱罗活了下来。意识到没有人喜欢他，我爱罗逐渐地转变成一个没有感情的人，发誓只为自己而活，从杀人中寻找乐趣，并用沙子在额头上刻了“爱”字。<br> 由于惧怕他体内的怪兽会占据他的心灵，我爱罗从小患了失眠症，这是为什么他的眼圈是黑的缘故。平时背上背负著一个巨大的葫芦，当危机出现时，葫芦中的砂子会自动保护我爱罗。<br><br><br /> 　　<span class="b5-4">2.忍术</span><br><br /> 　　·绝对防御：随身携带一部分带有查克拉的砂子，随时形成防御<br><br /> 　　·砂分身：用沙子造出一个分身<br><br /> 　　·砂瞬身：用沙子移动<br><br /> 　　·砂缚柩：以沙迅速靠近对手将目标包在沙内无法行动，然后用强大的压力将对手压死。<br><br /> 　　·砂时雨：将沙漫布于空中，然后集中一点落下以配合下一式<br><br /> 　　·砂手里剑：在沙中注入查克拉使之硬化，快速放出<br><br /> 　　·砂之铠甲：长期将魔沙覆盖于身体表面起到防御作用<br><br /> 　　·砂之守护Ⅰ：沙不需要我爱罗的意识自行保护<br><br /> 　　·守鹤半觉醒：出现一个大沙球，将自己包住，有敌人进攻沙子会自动反击。<br><br /> 　　·守鹤之盾：最强的终极防御术！将地下石矿中最坚硬的部分混合查克拉制成。可以抵消一切攻击。用地下最强的矿物质加查克拉做成沙瀑枪葬的盾。<br><br /> 　　·守鹤之矛：最强的终极攻击术！与守鹤之盾相匹配。曾用此招将[匠忍者村]的始祖击毙<br><br /> 　　·砂瀑送葬：用沙将对手压死，用于被沙缚柩困住的对手出招<br><br /> 　　·流沙瀑流：大面积操纵沙控制对手以配合砂瀑大葬<br><br /> 　　·砂瀑大葬：沙暴送葬强化版，范围扩大到一平方公里<br><br /> 　　·砂瀑枪葬：最硬绝对攻击! 用沙以棱台形包住对手,然后用巨型守鹤之矛击中对手，这招消耗在沙中注入查克拉使之硬化，快速放出查克拉特别大，杀伤力强。<br><br /> 　　·砂流葬：控制目标下方的沙，制成流沙，将目标陷入地下200米处压死灭砂瀑葬<br><br /> 　　·灭砂瀑葬：在沙地上开出巨大裂口，使对手陷入沙层以下。当沙子完全埋没后，将查克拉<br><br /> 　　集中于左手，使沙子放射出与地震般强大的震感爆炸力，杀伤力极强<br><br /> 　　·砂缚牢：沙缚柩扩大版.将困住对手的沙缚柩浮于半空利用周围的风沙配合查克拉进行方型式四面扭曲、挤压，最后爆破沙牢<br><br /> 　　·假寐之术（狸寝术）：催眠术,让自己深度沉睡,以爆发出守鹤<br><br /> 　　·砂之眼：在被完全包裹住自己时，为了探清外面的情况做了一个眼睛。但是这不是普通的沙眼，和视神经是连接的<br><br /> 　　·砂雷针：剧场版『幻之地底遗迹』中我爱罗使用的绝招，将沙子做成针状散布在敌人四周，产生雷电攻击敌人<br><br /> 　　.风遁·无限砂尘大突破：风遁混杂着沙子，攻击大范围内的敌人<br><br /> 　　.风遁·练空弹：用大量查克拉压缩做成的空气波攻击敌人<br><br /> 　　·砂漠浮游：利用沙将自己及李洛克升到空中，以避过君麻吕恐怖之术－早蕨之舞（把大地化为尸骨）<br><br /> 　　·沙瀑意流：将大片的岩石化为沙子<br><br /> 　　·砂尘双击 <br><br /> 　　·砂尘冥柩 <br><br /> 　　沙阵雨:,可使对手的脚无法动<br><br /> </div><br /> <div id='scroll5' class="b5-5"><br /> <div id="block5" class="b5-6"> </div><br /> </div><br /> <div style="clear:both"></div><br /> </div><br /> </div><br /> <script language="javascript"><br /> var Sys = (function(ua){<br /> var s = {};<br /> s.IE = ua.match(/msie ([\d.]+)/)?true:false;<br /> s.<b>Firefox</b> = ua.match(/firefox\/([\d.]+)/)?true:false;<br /> s.<b>Chrome</b> = ua.match(/chrome\/([\d.]+)/)?true:false;<br /> s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;<br /> s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;<br /> s.<b>IE8</b> = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;<br /> return s;<br /> })(navigator.userAgent.toLowerCase());<br /> Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);<br /> var $ = function (id) {<br /> return "string" == typeof id?document.getElementById(id):id;<br /> };<br /> var $$ = function(p,e){<br /> return p.getElementsByTagName(e);<br /> };<br /> function addListener(element,e,fn){<br /> element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)<br /> };<br /> function removeListener(element,e,fn){<br /> element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)<br /> };<br /> function create(elm,parent,fn){<br /> var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);<br /> };<br /> var Css = function(e,o){<br /> if(typeof o=="string")<br /> {<br /> e.style.cssText=o;<br /> return;<br /> }<br /> for(var i in o)<br /> e.style[i] = o[i];<br /> };<br /> function getobjpos(el,left){<br /> var val = 0;<br /> while (el !=null) {<br /> val += el["offset" + (left? "Left": "Top")];<br /> el = el.offsetParent;<br /> }<br /> return val;<br /> };<br /> var CurrentStyle = function(element){<br /> return element.currentStyle || document.defaultView.getComputedStyle(element, null);<br /> };<br /> var Bind = function(object, fun) {<br /> var args = Array.prototype.slice.call(arguments).slice(2);<br /> return function() {<br /> return fun.apply(object, args);<br /> }<br /> };<br /> var BindAsEventListener = function(object, fun,args) {<br /> var args = Array.prototype.slice.call(arguments).slice(2);<br /> return function(event) {<br /> return fun.apply(object, [event || window.event].concat(args));<br /> }<br /> };<br /> var Tween = {<br /> Linear: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; }<br /> };<br /> var Extend = function(destination, source) {<br /> for (var property in source) {<br /> destination[property] = source[property];<br /> }<br /> };<br /> var Class = function(properties){<br /> var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};<br /> _class.prototype = properties;<br /> return _class;<br /> };<br /> var Drag = new Class({<br /> options:{<br /> Limit : false,<br /> mxLeft : 0,<br /> mxRight : 9999,<br /> mxTop : 0,<br /> mxBottom : 9999,<br /> mxContainer : null,<br /> LockX : false,<br /> LockY : false,<br /> zIndex : 2,<br /> Onstart : function(){},<br /> Onmove : function(){},<br /> Onstop : function(){}<br /> },<br /> initialize:function(obj,options){<br /> this._obj = obj;<br /> this._x = 0;<br /> this._y = 0;<br /> this._marginLeft = 0;<br /> this._marginTop = 0;<br /> this._fM = BindAsEventListener(this, this.Move);<br /> this._fS = Bind(this, this.Stop);<br /> var o ={};<br /> Extend(o,this.options);<br /> Extend(o,options||{});<br /> Extend(this,o);<br /> this.zIndex = Math.max(this.zIndex,Drag.zIndex||0);<br /> if(this.mxContainer&&this.Limit) //设置了限制和容器限制后计算边界直<br /> {<br /> this.mxLeft = getobjpos(this.mxContainer,1);<br /> this.mxTop = getobjpos(this.mxContainer,0);<br /> this.mxRight = getobjpos(this.mxContainer,1) + this.mxContainer.offsetWidth-this._obj.offsetWidth;<br /> this.mxBottom = getobjpos(this.mxContainer,0) + this.mxContainer.offsetHeight-this._obj.offsetHeight;<br /> }<br /> addListener(this._obj,"mousedown",BindAsEventListener(this,this.Start));<br /> Drag.zIndex = this.zIndex;<br /> },<br /> Start:function(e){<br /> this._obj.style.zIndex = ++Drag.zIndex;<br /> this._x = e.clientX - this._obj.offsetLeft ;<br /> this._y = e.clientY - this._obj.offsetTop;<br /> this._marginLeft = parseInt(this._obj.style.marginLeft)||0;<br /> this._marginTop = parseInt(this._obj.style.marginTop)||0;<br /> if(Sys.IE)<br /> {<br /> addListener(this._obj, "losecapture", this._fS);<br /> this._obj.setCapture();<br /> }<br /> else<br /> {<br /> e.preventDefault();<br /> addListener(window, "blur", this._fS);<br /> }<br /> addListener(document,"mousemove",this._fM);<br /> addListener(document,"mouseup",this._fS);<br /> this.Onstart();<br /> },<br /> Move:function(e){<br /> window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();<br /> var iLeft = e.clientX - this._x, iTop = e.clientY - this._y;<br /> if(this.Limit){<br /> iLeft= Math.min(Math.max(iLeft,this.mxLeft),this.mxRight);<br /> iTop = Math.min(Math.max(iTop,this.mxTop),this.mxBottom);<br /> }<br /> if(!this.LockX)this._obj.style.left = iLeft - this._marginLeft + "px";<br /> if(!this.LockY)this._obj.style.top = iTop - this._marginTop + "px";<br /> this.Onmove();<br /> },<br /> Stop:function(){<br /> removeListener(document,'mousemove',this._fM);<br /> removeListener(document,'mouseup',this._fS);<br /> if(Sys.IE)<br /> {<br /> removeListener(this._obj, "losecapture", this._fS);<br /> this._obj.releaseCapture();<br /> }<br /> else<br /> removeListener(window, "blur", this._fS);<br /> this.Onstop();<br /> }<br /> });<br /> var Slider = new Class({<br /> options :{<br /> direction : true, //true为纵,false为横<br /> type : "Y", //分别为X,Y,N<br /> shapechange : true, //是否该变滚动条的形状<br /> topvalue : 0, //上或左偏差值<br /> bottomvalue : 0, //下或右偏差值<br /> border : 0, //处理ie下border的问题<br /> step : 1, //键盘操作时候的步长<br /> t : 0,<br /> b : 0,<br /> c : 0,<br /> d : 40,<br /> Onmove : function(){}<br /> },<br /> initialize :function(container,block,blockcontainer,options){<br /> this.container = container;<br /> this.block = block;<br /> this.blockcontainer = blockcontainer;<br /> var o ={};<br /> Extend(o,this.options);<br /> Extend(o,options||{});<br /> Extend(this,o);<br /> this.timer = null;<br /> this.ismove = false;<br /> var _self = this;<br /> /*==========================================================================================================================*/<br /> /*如果滚动条不是单独的图片可以用div模拟这时候就得设置滚动条的长度或者宽度了按比例设置*/<br /> this.type =="Y"&&this.shapechange&&(this.block.style.height = this.container.offsetHeight*(this.container.offsetHeight/$$(this.container,"div")[0].scrollHeight)+"px");<br /> this.type =="X"&&this.shapechange&&(this.block.style.width = this.container.offsetWidth*(this.container.offsetWidth/$$(this.container,"div")[0].scrollWidth)+"px");<br /> /*==========================================================================================================================*/<br /> var xc = this.blockcontainer?this.blockcontainer:this.container;<br /> addListener(xc,'click',BindAsEventListener(this,this.Start));<br /> addListener(this.block,'click',BindAsEventListener(this,this.Bubble));<br /> /*==========================================================================================================================*/<br /> this.KeyBind(this.container); //键盘与鼠标滑轮部分参考的cloudgamer的<br /> this.WheelBind(this.container);<br /> var oFocus = Sys.IE ? this.block : this.container;<br /> addListener(this.block, "mousedown", function(){ _self.Stopmove();oFocus.focus();});<br /> /*==========================================================================================================================*/<br /> this.drag = new Drag(this.block,{Limit:true,mxContainer:xc,Onmove:Bind(this,this.Move)});<br /> this.drag[this.direction?"LockX":"LockY"] = true;<br /> this.border = (Sys.IE6||Sys.IE7)?this.border:0; //ie6,7下 border也要算进去不然有误差 ie8,却又不需要算真是纠结............<br /> if(this.direction)<br /> {<br /> this.drag.mxTop = this.drag.mxTop - this.topvalue + this.border;<br /> this.drag.mxBottom = this.drag.mxBottom + this.bottomvalue + this.border;<br /> this.block.style.top = this.drag.mxTop+"px";<br /> }<br /> else<br /> {<br /> this.drag.mxLeft = this.drag.mxLeft - this.topvalue + this.border;<br /> this.drag.mxRight = this.drag.mxRight + this.bottomvalue + this.border;<br /> this.block.style.left = this.drag.mxLeft+"px";<br /> }<br /> this.Move();<br /> },<br /> Keycontrol : function(e){<br /> this.Stopdefault(e);<br /> this.Stopmove();<br /> var l1 =this.direction?"top":"left",l2 = this.direction?"offsetTop":"offsetLeft",l3=this.direction?"mxTop":"mxLeft",l4=this.direction?"mxBottom":"mxRight";<br /> if(e.keyCode==37||e.keyCode==38)this.block.style[l1] = Math.max(this.block[l2]-this.step,this.drag[l3]) +'px';<br /> if(e.keyCode==39||e.keyCode==40)this.block.style[l1] = Math.min(this.block[l2]+this.step,this.drag[l4]) +'px';<br /> this.Move();<br /> },<br /> Wheelcontrol :function(e){<br /> this.Stopmove();<br /> var t = Sys.Firefox?e.detail:e.wheelDelta;<br /> var l1 =this.direction?"top":"left",l2 = this.direction?"offsetTop":"offsetLeft",l3=this.direction?"mxTop":"mxLeft",l4=this.direction?"mxBottom":"mxRight";<br /> this.block.style[l1] = Sys.Firefox?(t<0?Math.max(this.block[l2]-5,this.drag[l3])+'px':Math.min(this.block[l2]+5,this.drag[l4]) +'px'):(t>0?Math.max(this.block[l2]-5,this.drag[l3])+'px':Math.min(this.block[l2]+5,this.drag[l4]) +'px');<br /> this.Move();<br /> this.Stopdefault(e);<br /> },<br /> WheelBind : function(o){<br /> addListener(o, Sys.Firefox? "DOMMouseScroll" : "mousewheel", BindAsEventListener(this,this.Wheelcontrol));<br /> },<br /> KeyBind : function(o){<br /> addListener(o,'keydown',BindAsEventListener(this,this.Keycontrol));<br /> o.tabIndex = -1;<br /> Sys.IE || (o.style.outline = "none");<br /> },<br /> Move : function(){<br /> var c = $$(this.container,"div")[0] ;<br /> /*=========================================================================================================================*/<br /> if(this.type=="Y")c.scrollTop = (c.scrollHeight - c.offsetHeight)*(this.block.offsetTop - this.drag.mxTop)/(this.blockcontainer.offsetHeight - this.block.offsetHeight +this.topvalue+this.bottomvalue);<br /> if(this.type=="X")c.scrollLeft = (c.scrollWidth - c.offsetWidth)*(this.block.offsetLeft - this.drag.mxLeft)/(this.blockcontainer.offsetWidth-this.block.offsetWidth+this.topvalue+this.bottomvalue);<br /> /*上面为滚动条的计算方式*/<br /> /*=========================================================================================================================*/<br /> this.Onmove();<br /> },<br /> Start : function(e){<br /> this.ismove = true;<br /> this.b = this.direction?this.block.offsetTop:this.block.offsetLeft;<br /> if(this.direction)<br /> {<br /> var t = Sys.Chrome?document.body.scrollTop:document.documentElement.scrollTop;<br /> var l = (e.clientY+t)<=this.block.offsetTop?0:this.block.offsetHeight;<br /> }<br /> else<br /> {<br /> var t = Sys.Chrome?document.body.scrollLeft:document.documentElement.scrollLeft;<br /> var l = (e.clientX+t)<=this.block.offsetLeft?0:this.block.offsetWidth;<br /> }<br /> this.c = this.direction?(e.clientY+t-l):(e.clientX+t-l);<br /> this.t = 0;<br /> this.Run();<br /> },<br /> Run : function(){<br /> if(!this.ismove)return;<br /> clearTimeout(this.timer);<br /> if(this.t<this.d)<br /> {<br /> this.Runto(Math.round(Tween.Linear(this.t++,this.b,(this.c-this.b),this.d)));<br /> this.timer = setTimeout(Bind(this,this.Run),5);<br /> }<br /> else<br /> {<br /> this.Runto(this.c);<br /> this.t=0;<br /> this.ismove = true;<br /> }<br /> },<br /> Runto : function(i){<br /> this.block.style[this.direction?"top":"left"] = i + "px";<br /> this.Move();<br /> },<br /> Bubble : function(e){<br /> Sys.IE?(e.cancelBubble=true):(e.stopPropagation());<br /> },<br /> Stopdefault : function(e){<br /> Sys.IE?(e.returnValue = false):(e.preventDefault());<br /> },<br /> Left : function(o){<br /> this.Lrmove("mxTop","mxLeft");<br /> },<br /> Right : function(){<br /> this.Lrmove("mxBottom","mxRight");<br /> },<br /> Lrmove : function(t,b){<br /> if(this.t!=0)return;<br /> this.ismove = true;<br /> this.b = this.direction?this.block.offsetTop:this.block.offsetLeft;<br /> this.c = this.direction?this.drag[t]:this.drag[b];<br /> this.Run();<br /> },<br /> Stopmove : function(){<br /> this.ismove=false;clearTimeout(this.time);this.t = 0;<br /> }<br /> })<br /> window.onload = function(){<br /> //================================================================================================<br /> new Slider($('a1'),$('block1'),null,{direction:false,type:"N",Onmove:function(){<br /> $('info1').innerHTML = parseInt((this.block.offsetLeft - this.drag.mxLeft)/(this.container.offsetWidth-this.block.offsetWidth)*100) + "%";<br /> }});<br /> //================================================================================================<br /> new Slider($('a2'),$('block2'),null,{type:"S",Onmove:function(){<br /> $('info2').innerHTML = parseInt((this.block.offsetTop - this.drag.mxTop)/(this.container.offsetHeight-this.block.offsetHeight)*100) + "%";<br /> }});<br /> //================================================================================================<br /> var deom3 = new Slider($('a3'),$("block3"),$("scroll3"),{shapechange:false,direction:false,type:"X",topvalue:5,bottomvalue:5,border:2});<br /> addListener($('la'),'click',Bind(deom3,deom3.Left));<br /> addListener($('r'),'click',Bind(deom3,deom3.Right));<br /> //================================================================================================<br /> var deom4=new Slider($('container'),$('block4'),$('scroll4'),{shapechange:false,topvalue:11,bottomvalue:12,border:1});<br /> addListener($('p1'),'click',Bind(deom4,deom4.Left));<br /> addListener($('p2'),'click',Bind(deom4,deom4.Right));<br /> //================================================================================================<br /> new Slider($('con1'),$('block5'),$('scroll5'));<br /> }<br /> </script><br /> </body><br /> </html><br /> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

多款模拟滚动条效果 JS+CSS实现代码

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

多款模拟滚动条效果 JS+CSS实现代码

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀