javascript模擬滾動(dòng)條實(shí)現(xiàn)代碼

更新時(shí)間：2010年03月11日 16:40:04 投稿：mdxy-dxy

從csdn的blog上轉(zhuǎn)過(guò)來(lái)的做了些修改，其實(shí)寫(xiě)的比較糟糕(我指的是構(gòu)造) 我用的是以前的一個(gè)drag類在這個(gè)基礎(chǔ)上在的來(lái)完成的Slider

其實(shí)這樣代碼產(chǎn)生些了冗余.......不如單獨(dú)寫(xiě)個(gè)Slider類做為第一個(gè)版本還是保存起來(lái) 有時(shí)間的話試著單獨(dú)的寫(xiě)個(gè)Slider類

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style type="text/css">#container {height:200px;_height:198px;width:385px;border:1px solid #CCCCCC;}#container #content{height:200px;width:370px;float:left;overflow:hidden;}#container #content div{margin-top:4px;margin-left:4px;height:16px;font-size:14px;color:#666666;width:100%;}#container #scroll{height:200px;width:15px;float:right;}.b1{width:600px; height:23px; background-image:url(/upload/2010-3/20100311163933339.gif)}/*=========================================================*/#container1 {height:200px;width:400px;_width:398px;border:1px solid #999999;}#container1 #content1{height:180px;width:400px;overflow:hidden;}#container1 #content1 td{height:180px;width:200px;}#container1 #content1 td img{height:180px;width:200px;}#container1 #scroll1{height:20px;width:400px;}#container1 #scroll1 #block1{width:20px;height:20px;background-color:#990000;position:absolute;}/*====================================================================*/table div{height:20px; font-size:13px; margin-top:5px; color:#333333; font-weight:bold}table img{height:160px; width:200px;}/*====================================================================*/.b2{background-image:url(/upload/2010-3/20100311163933545.gif); width:26px; height:34px;}.b2-1{background:transparent url(/upload/2010-3/20100311163934864.gif) no-repeat scroll center center; width:20px; height:161px; margin-left:4px;}.b2-2{background-image:url(/upload/2010-3/20100311163934603.gif); height:22px; width:20px; position:absolute}.b2-3{background-image:url(/upload/2010-3/20100311163934887.gif); width:26px; height:34px;}/*====================================================================*/.b3{ width:840px; height:216px;border:2px solid #b50000;}.b3-1{width:740px; height:216px; margin:0 auto; }.b3-2{height:180px; width:100%; overflow:hidden;}.b3-l1{height:auto; width:660px;margin:0 auto;}.b3-l2{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:30px; background-position:-182px 0px; float:left; }.b3-l3{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif);height:20px; width:600px; background-position:0px -226px; float:left;}.b3-l4{background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:162px; background-position:-14px 0px; position:absolute}.b3-l5{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:30px; background-position:-216px 0px; float:left;}/*====================================================================*/.b4-1{font-size:0px; height:17px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-15px 0; margin:0px;}.b4-2{font-size:0px; height:166px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-30px 0; }.b4-3{font-size:0px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-45px 0; position:absolute; height:17px; width:15px; }.b4-4{font-size:0px; height:17px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:0 0;margin:0px;}/*====================================================================*/.b5-1{background:url(/upload/2010-3/20100311163934971.jpg) no-repeat; width:550px; height:520px; padding:1px;}.b5-2{height:350px; width:300px; margin-left:50px; margin-top:50px;}.b5-3{ margin-top:10px; margin-left:5px; height:330px; width:260px; font-size:14px;; color:#054c68; float:left; overflow:hidden}.b5-4{font-size:16px; font-weight:bold}.b5-5{float:right; margin-right:12px; margin-top:10px; height:330px; width:15px; }.b5-6{position:absolute; height:10px; line-height:10px; width:15px; background-color:#c6e7f4;}</style></head><body style=" padding:30px; margin:0px;"><div   class="2qcoac2"   id='a1' class="b1" ><img id='block1' src='/upload/2010-3/20100311163934505.gif' style="position: absolute; margin-top:3px;"></div><div   class="gm2s3u2"   id='info1'>0%</div><div><div   id="oya3cel"   class="b2"></div><div   class="eubo7fo"   id="a2" class="b2-1"><div   class="rlxuwyf"   id='block2' class="b2-2"></div></div><div   id="2zn7zgi"   class="b2-3"></div></div><div   class="2qx2ipg"   id='info2'>0%</div><div   id="cntk2x2"   class="b3"><div   class="n2dfwya"   id="a3" class="b3-1"><div   id="1lf2wdp"   class="b3-2"><table width="1680" height="180" border="0" cellspacing="0" cellpadding="0"><tr><td width="210" align="center"><img src='/upload/2010-3/20100311163955721.jpg'></td><td width="210" align="center"><img src="/upload/2010-3/20100311163956292.jpg"></td><td width="210" align="center"><img src="/upload/2010-3/20100311163956843.jpg"></td><td width="210" align="center"><img src="/upload/2010-3/20100311163956806.jpg"></td><td width="210" align="center"><img src="/upload/2010-3/20100311163956181.jpg"></td><td width="210" align="center"><img src="http://comic.qq.com/images/comic/2008/10/13/gpt/5.jpg"></td><td width="210" align="center"><img src="/upload/2010-3/20100311163956254.jpg"></td><td width="210" align="center"><img src="/upload/2010-3/20100311163956721.jpg"></td></tr></table></div><div   id="egdugse"   class="b3-l1"><div   class="8wdf727"   id='la' class="b3-l2"></div><div   class="pdfamy7"   id="scroll3" class="b3-l3"><div   class="1xbyfhe"   id ="block3" class="b3-l4"></div></div><div   class="w2kmelx"   id='r' class="b3-l5"></div></div></div></div><div   class="cnp2bsz"   id="container"><div   class="dh7nwiz"   id="content"><div>人族</div><div>SKY流--強(qiáng)大的中國(guó)選手人皇sky的成名絕技</div><div>KUA流--多不兵配合MK,前期可謂遇佛神通殺</div><div>3法流--好象只是很好打獸族,打精靈還得配合小炮</div><div>騎士獅鳩流--配合圣騎的3級(jí)光環(huán)全防心靈之火,絕對(duì)bug</div><div>飄逸流--3蛋的成名絕技,首發(fā)圣騎,打得亡靈一般沒(méi)的脾氣</div><div>機(jī)械流--飛機(jī)加坦克,曾經(jīng)風(fēng)靡一時(shí),moon也吃虧無(wú)數(shù)</div><div>萬(wàn)精油--3發(fā)+火槍+小炮,不變應(yīng)萬(wàn)變的打法</div><div>獸族</div><div>跑狼騎--狼騎的高速移動(dòng),城攻與網(wǎng),拆家起來(lái)無(wú)人能敵</div><div>速飛龍--比較投機(jī)的打法,一旦投機(jī)成功,對(duì)方可以直接gg</div><div>黑白牛--配合撒滿,高攻,高防,高攻速,高血,無(wú)限復(fù)活</div><div>白牛海--適合內(nèi)戰(zhàn),無(wú)限復(fù)活且20的攻擊打獸身上2倍加成</div><div>XXXX流--獵頭+巫醫(yī)+撒滿,orc時(shí)代的bug,如今很難看到</div><div>萬(wàn)精油--大G+狼騎+白牛+科多,最常規(guī)的打法</div><div>不死族</div><div>蜘蛛流--蜘蛛的高功,加上不死英雄的強(qiáng)大魔法,強(qiáng)</div><div>冰甲蜘蛛流--主要對(duì)抗獸族,讓蜘蛛,亡騎更難打.</div><div>西瓜流--中國(guó)天災(zāi)Ted的成名絕技,女妖給兵套個(gè)盾,象西瓜</div><div>天地雙鬼--有段時(shí)間一直被精靈認(rèn)為是bug.</div><div>胖子毀滅--高攻,高防,高血,且無(wú)視魔法效果</div><div>骷髏海--可以看到滿天的骷髏大軍(驅(qū)散法師小精靈完克)</div><div>精靈族</div><div>女獵流1--NEvsNE,一般虎MM配合大量女獵,全是MM.</div><div>女獵流2--NEvsHUM,SM/女王配合大量女獵克制人族速礦</div><div>吹風(fēng)流--曾經(jīng)的獸族客星,華麗,飄逸,==</div><div>大樹(shù)流--很多很多大樹(shù)配合很多很多的ac,場(chǎng)面壯觀</div><div>弩車(chē)流--基本只有耳聞沒(méi)見(jiàn)過(guò)</div><div>亂礦流--Moon的成名絕技,一個(gè)礦被拆了,2個(gè)礦起來(lái)了</div><div>三遠(yuǎn)流--ACMM+鹿MM+得魯伊大叔,把任何物體射成馬蜂窩</div></div><div   class="xryamy2"   id="scroll"><div   class="i8c3vz7"   id='p1' class="b4-1"></div><div   class="yh2xqdp"   id="scroll4" class="b4-2"><div   class="mdv7sew"   id="block4" class="b4-3"> </div></div><div   class="4izgs27"   id='p2' class="b4-4"></div></div></div><div   id="g3w8evc"   class="b5-1"><div   class="cgnu877"   id='con1' class="b5-2"><div   class="cs2nqht"   id='ccc1' class="b5-3">　　<span id="5dfsz2t"    class="b5-4">1.身世</span>　　我愛(ài)羅是第四代風(fēng)影之子，也是手鞠和勘九郎的弟弟。　　當(dāng)他出世時(shí)，因?yàn)樯半[忍者村資/金/短缺，在他的父親的指示下，一尾守鶴被封印在我愛(ài)羅的體內(nèi)，目的是為了讓他成為保護(hù)村莊的強(qiáng)大武器。憂郁的　　由于這樣做需要作出犧牲，我愛(ài)羅的母親因此成了犧牲品?！　∥覑?ài)羅由他的舅父夜叉丸養(yǎng)大，并由他的父親傳授忍術(shù)。由于我愛(ài)羅具備守鶴的可怕力量，村子的人憎恨和懼怕他?！　∫共嫱枋俏ㄒ魂P(guān)照他的人，也只有夜叉丸了解我愛(ài)羅的心里其實(shí)并不想傷害任何人?？墒撬母赣H第四代風(fēng)影并不這么想，他一直視我愛(ài)羅為村莊的一個(gè)巨大威脅。　　于是第四代風(fēng)影不斷地派殺手刺殺我愛(ài)羅，可是沒(méi)有一次成功。最后第四代風(fēng)影只好叫夜叉丸下手。夜叉丸執(zhí)行命令時(shí)死在我愛(ài)羅的手上。當(dāng)我愛(ài)羅發(fā)現(xiàn)來(lái)殺他的殺手竟然是夜叉丸時(shí)感到異常震驚和悲傷。夜叉丸死前將真相告訴我愛(ài)羅，其實(shí)他從來(lái)就沒(méi)有喜歡過(guò)我愛(ài)羅。他這樣做只是希望能夠?yàn)樗慕憬悖ㄎ覑?ài)羅的母親）報(bào)仇。夜叉丸把許多炸/藥綁在身上，希望和我愛(ài)羅同歸于盡。由于砂子的保護(hù)，我愛(ài)羅活了下來(lái)。意識(shí)到?jīng)]有人喜歡他，我愛(ài)羅逐漸地轉(zhuǎn)變成一個(gè)沒(méi)有感情的人，發(fā)誓只為自己而活，從殺/人/中尋找樂(lè)趣，并用沙子在額頭上刻了“愛(ài)”字。 由于懼怕他體內(nèi)的怪獸會(huì)占據(jù)他的心靈，我愛(ài)羅從小患了失眠癥，這是為什么他的眼圈是黑的緣故。平時(shí)背上背負(fù)著一個(gè)巨大的葫蘆，當(dāng)危機(jī)出現(xiàn)時(shí)，葫蘆中的砂子會(huì)自動(dòng)保護(hù)我愛(ài)羅?！　?span id="pyvhikm"    class="b5-4">2.忍術(shù)</span>　　·絕對(duì)防御：隨身攜帶一部分帶有查克拉的砂子，隨時(shí)形成防御　　·砂分身：用沙子造出一個(gè)分身　　·砂瞬身：用沙子移動(dòng)　　·砂縛柩：以沙迅速靠近對(duì)手將目標(biāo)包在沙內(nèi)無(wú)法行動(dòng)，然后用強(qiáng)大的壓力將對(duì)手壓死?！　?middot;砂時(shí)雨：將沙漫布于空中，然后集中一點(diǎn)落下以配合下一式　　·砂手里劍：在沙中注入查克拉使之硬化，快速放出　　·砂之鎧甲：長(zhǎng)期將魔沙覆蓋于身體表面起到防御作用　　·砂之守護(hù)Ⅰ：沙不需要我愛(ài)羅的意識(shí)自行保護(hù)　　·守鶴半覺(jué)醒：出現(xiàn)一個(gè)大沙球，將自己包住，有敵人進(jìn)攻沙子會(huì)自動(dòng)反擊?！　?middot;守鶴之盾：最強(qiáng)的終極防御術(shù)！將地下石礦中最堅(jiān)硬的部分混合查克拉制成?？梢缘窒磺泄?。用地下最強(qiáng)的礦物質(zhì)加查克拉做成沙瀑槍葬的盾。　　·守鶴之矛：最強(qiáng)的終極攻擊術(shù)！與守鶴之盾相匹配。曾用此招將[匠忍者村]的始祖擊斃　　·砂瀑送葬：用沙將對(duì)手壓死，用于被沙縛柩困住的對(duì)手出招　　·流沙瀑流：大面積操縱沙控制對(duì)手以配合砂瀑大葬　　·砂瀑大葬：沙暴送葬強(qiáng)化版，范圍擴(kuò)大到一平方公里　　·砂瀑槍葬：最硬絕對(duì)攻擊! 用沙以棱臺(tái)形包住對(duì)手,然后用巨型守鶴之矛擊中對(duì)手，這招消耗在沙中注入查克拉使之硬化，快速放出查克拉特別大，殺傷力強(qiáng)。　　·砂流葬：控制目標(biāo)下方的沙，制成流沙，將目標(biāo)陷入地下200米處壓死 滅砂瀑葬　　·滅砂瀑葬：在沙地上開(kāi)出巨大裂口，使對(duì)手陷入沙層以下。當(dāng)沙子完全埋沒(méi)后，將查克拉　　集中于左手，使沙子放射出與地震般強(qiáng)大的震感爆炸力，殺傷力極強(qiáng)　　·砂縛牢：沙縛柩擴(kuò)大版.將困住對(duì)手的沙縛柩浮于半空利用周?chē)娘L(fēng)沙配合查克拉進(jìn)行方型式四面扭曲、擠壓，最后爆破沙牢　　·假寐之術(shù)（貍寢術(shù)）：催眠術(shù),讓自己深度沉睡,以爆發(fā)出守鶴　　·砂之眼：在被完全包裹住自己時(shí)，為了探清外面的情況做了一個(gè)眼睛。但是這不是普通的沙眼，和視神經(jīng)是連接的　　·砂雷針：劇場(chǎng)版『幻之地底遺跡』中我愛(ài)羅使用的絕招，將沙子做成針狀散布在敵人四周，產(chǎn)生雷電攻擊敵人　　.風(fēng)遁·無(wú)限砂塵大突破：風(fēng)遁混雜著沙子，攻擊大范圍內(nèi)的敵人　　.風(fēng)遁·練空彈：用大量查克拉壓縮做成的空氣波攻擊敵人　　·砂漠浮游：利用沙將自己及李洛克升到空中，以避過(guò)君麻呂恐怖之術(shù)－早蕨之舞（把大地化為尸骨）　　·沙瀑意流：將大片的巖石化為沙子　　·砂塵雙擊 　　·砂塵冥柩 　　沙陣雨:,可使對(duì)手的腳無(wú)法動(dòng)</div><div   class="k3mjvc7"   id='scroll5' class="b5-5"><div   class="kkwnzqm"   id="block5" class="b5-6">&nbsp;</div></div><div style="clear:both"></div></div></div><script language="javascript">var Sys = (function(ua){var s = {};s.IE = ua.match(/msie ([\d.]+)/)?true:false;s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false;s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false;s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;return s;})(navigator.userAgent.toLowerCase());Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);var $ = function (id) {return "string" == typeof id?document.getElementById(id):id;};var $$ = function(p,e){return p.getElementsByTagName(e);};function addListener(element,e,fn){element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};function removeListener(element,e,fn){element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);};var Css = function(e,o){if(typeof o=="string"){e.style.cssText=o;return;}for(var i in o)e.style[i] = o[i];};function getobjpos(el,left){var val = 0;while (el !=null) {val += el["offset" + (left? "Left": "Top")];el = el.offsetParent;}return val;};var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};var Bind = function(object, fun) {var args = Array.prototype.slice.call(arguments).slice(2);return function() {return fun.apply(object, args);}};var BindAsEventListener = function(object, fun,args) {var args = Array.prototype.slice.call(arguments).slice(2);return function(event) {return fun.apply(object, [event || window.event].concat(args));}};var Tween = {Linear: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; }};var Extend = function(destination, source) {for (var property in source) {destination[property] = source[property];}};var Class = function(properties){var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};_class.prototype = properties;return _class;};var Drag = new Class({options:{Limit : false,mxLeft : 0,mxRight : 9999,mxTop : 0,mxBottom : 9999,mxContainer : null,LockX : false,LockY : false,zIndex : 2,Onstart : function(){},Onmove : function(){},Onstop : function(){}},initialize:function(obj,options){this._obj = obj;this._x = 0;this._y = 0;this._marginLeft = 0;this._marginTop = 0;this._fM = BindAsEventListener(this, this.Move);this._fS = Bind(this, this.Stop);var o ={};Extend(o,this.options);Extend(o,options||{});Extend(this,o);this.zIndex = Math.max(this.zIndex,Drag.zIndex||0);if(this.mxContainer&&this.Limit) //設(shè)置了限制 和 容器限制后 計(jì)算邊界直{this.mxLeft = getobjpos(this.mxContainer,1);this.mxTop = getobjpos(this.mxContainer,0);this.mxRight = getobjpos(this.mxContainer,1) + this.mxContainer.offsetWidth-this._obj.offsetWidth;this.mxBottom = getobjpos(this.mxContainer,0) + this.mxContainer.offsetHeight-this._obj.offsetHeight;}addListener(this._obj,"mousedown",BindAsEventListener(this,this.Start));Drag.zIndex = this.zIndex;},Start:function(e){this._obj.style.zIndex = ++Drag.zIndex;this._x = e.clientX - this._obj.offsetLeft ;this._y = e.clientY - this._obj.offsetTop;this._marginLeft = parseInt(this._obj.style.marginLeft)||0;this._marginTop = parseInt(this._obj.style.marginTop)||0;if(Sys.IE){addListener(this._obj, "losecapture", this._fS);this._obj.setCapture();}else{e.preventDefault();addListener(window, "blur", this._fS);}addListener(document,"mousemove",this._fM);addListener(document,"mouseup",this._fS);this.Onstart();},Move:function(e){window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();var iLeft = e.clientX - this._x, iTop = e.clientY - this._y;if(this.Limit){iLeft= Math.min(Math.max(iLeft,this.mxLeft),this.mxRight);iTop = Math.min(Math.max(iTop,this.mxTop),this.mxBottom);}if(!this.LockX)this._obj.style.left = iLeft - this._marginLeft + "px";if(!this.LockY)this._obj.style.top = iTop - this._marginTop + "px";this.Onmove();},Stop:function(){removeListener(document,'mousemove',this._fM);removeListener(document,'mouseup',this._fS);if(Sys.IE){removeListener(this._obj, "losecapture", this._fS);this._obj.releaseCapture();}elseremoveListener(window, "blur", this._fS);this.Onstop();}});var Slider = new Class({options :{direction : true, //true為縱,false為橫type : "Y", //分別為X,Y,Nshapechange : true, //是否該變滾動(dòng)條的形狀topvalue : 0, //上或左偏差值bottomvalue : 0, //下或右偏差值border : 0, //處理ie下border的問(wèn)題step : 1, //鍵盤(pán)操作時(shí)候的步長(zhǎng)t : 0,b : 0,c : 0,d : 40,Onmove : function(){}},initialize :function(container,block,blockcontainer,options){this.container = container;this.block = block;this.blockcontainer = blockcontainer;var o ={};Extend(o,this.options);Extend(o,options||{});Extend(this,o);this.timer = null;this.ismove = false;var _self = this;/*==========================================================================================================================*//*如果滾動(dòng)條不是單獨(dú)的圖片可以用div模擬 這時(shí)候就得設(shè)置滾動(dòng)條的長(zhǎng)度或者寬度了 按比例設(shè)置*/this.type =="Y"&&this.shapechange&&(this.block.style.height = this.container.offsetHeight*(this.container.offsetHeight/$$(this.container,"div")[0].scrollHeight)+"px");this.type =="X"&&this.shapechange&&(this.block.style.width = this.container.offsetWidth*(this.container.offsetWidth/$$(this.container,"div")[0].scrollWidth)+"px");/*==========================================================================================================================*/var xc = this.blockcontainer?this.blockcontainer:this.container;addListener(xc,'click',BindAsEventListener(this,this.Start));addListener(this.block,'click',BindAsEventListener(this,this.Bubble));/*==========================================================================================================================*/this.KeyBind(this.container); //鍵盤(pán)與鼠標(biāo)滑輪部分參考的cloudgamer的this.WheelBind(this.container);var oFocus = Sys.IE ? this.block : this.container;addListener(this.block, "mousedown", function(){ _self.Stopmove();oFocus.focus();});/*==========================================================================================================================*/this.drag = new Drag(this.block,{Limit:true,mxContainer:xc,Onmove:Bind(this,this.Move)});this.drag[this.direction?"LockX":"LockY"] = true;this.border = (Sys.IE6||Sys.IE7)?this.border:0; //ie6,7下 border也要算進(jìn)去 不然有誤差 ie8,卻又不需要算 真是糾結(jié)............if(this.direction){this.drag.mxTop = this.drag.mxTop - this.topvalue + this.border;this.drag.mxBottom = this.drag.mxBottom + this.bottomvalue + this.border;this.block.style.top = this.drag.mxTop+"px";}else{this.drag.mxLeft = this.drag.mxLeft - this.topvalue + this.border;this.drag.mxRight = this.drag.mxRight + this.bottomvalue + this.border;this.block.style.left = this.drag.mxLeft+"px";}this.Move();},Keycontrol : function(e){this.Stopdefault(e);this.Stopmove();var l1 =this.direction?"top":"left",l2 = this.direction?"offsetTop":"offsetLeft",l3=this.direction?"mxTop":"mxLeft",l4=this.direction?"mxBottom":"mxRight";if(e.keyCode==37||e.keyCode==38)this.block.style[l1] = Math.max(this.block[l2]-this.step,this.drag[l3]) +'px';if(e.keyCode==39||e.keyCode==40)this.block.style[l1] = Math.min(this.block[l2]+this.step,this.drag[l4]) +'px';this.Move();},Wheelcontrol :function(e){this.Stopmove();var t = Sys.Firefox?e.detail:e.wheelDelta;var l1 =this.direction?"top":"left",l2 = this.direction?"offsetTop":"offsetLeft",l3=this.direction?"mxTop":"mxLeft",l4=this.direction?"mxBottom":"mxRight";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');this.Move();this.Stopdefault(e);},WheelBind : function(o){addListener(o, Sys.Firefox? "DOMMouseScroll" : "mousewheel", BindAsEventListener(this,this.Wheelcontrol));},KeyBind : function(o){addListener(o,'keydown',BindAsEventListener(this,this.Keycontrol));o.tabIndex = -1;Sys.IE || (o.style.outline = "none");},Move : function(){var c = $$(this.container,"div")[0] ;/*=========================================================================================================================*/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);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);/*上面為滾動(dòng)條的計(jì)算方式*//*=========================================================================================================================*/this.Onmove();},Start : function(e){this.ismove = true;this.b = this.direction?this.block.offsetTop:this.block.offsetLeft;if(this.direction){var t = Sys.Chrome?document.body.scrollTop:document.documentElement.scrollTop;var l = (e.clientY+t)<=this.block.offsetTop?0:this.block.offsetHeight;}else{var t = Sys.Chrome?document.body.scrollLeft:document.documentElement.scrollLeft;var l = (e.clientX+t)<=this.block.offsetLeft?0:this.block.offsetWidth;}this.c = this.direction?(e.clientY+t-l):(e.clientX+t-l);this.t = 0;this.Run();},Run : function(){if(!this.ismove)return;clearTimeout(this.timer);if(this.t<this.d){this.Runto(Math.round(Tween.Linear(this.t++,this.b,(this.c-this.b),this.d)));this.timer = setTimeout(Bind(this,this.Run),5);}else{this.Runto(this.c);this.t=0;this.ismove = true;}},Runto : function(i){this.block.style[this.direction?"top":"left"] = i + "px";this.Move();},Bubble : function(e){Sys.IE?(e.cancelBubble=true):(e.stopPropagation());},Stopdefault : function(e){Sys.IE?(e.returnValue = false):(e.preventDefault());},Left : function(o){this.Lrmove("mxTop","mxLeft");},Right : function(){this.Lrmove("mxBottom","mxRight");},Lrmove : function(t,b){if(this.t!=0)return;this.ismove = true;this.b = this.direction?this.block.offsetTop:this.block.offsetLeft;this.c = this.direction?this.drag[t]:this.drag[b];this.Run();},Stopmove : function(){this.ismove=false;clearTimeout(this.time);this.t = 0;}})window.onload = function(){//================================================================================================new Slider($('a1'),$('block1'),null,{direction:false,type:"N",Onmove:function(){$('info1').innerHTML = parseInt((this.block.offsetLeft - this.drag.mxLeft)/(this.container.offsetWidth-this.block.offsetWidth)*100) + "%";}});//================================================================================================new Slider($('a2'),$('block2'),null,{type:"S",Onmove:function(){$('info2').innerHTML = parseInt((this.block.offsetTop - this.drag.mxTop)/(this.container.offsetHeight-this.block.offsetHeight)*100) + "%";}});//================================================================================================var deom3 = new Slider($('a3'),$("block3"),$("scroll3"),{shapechange:false,direction:false,type:"X",topvalue:5,bottomvalue:5,border:2});addListener($('la'),'click',Bind(deom3,deom3.Left));addListener($('r'),'click',Bind(deom3,deom3.Right));//================================================================================================var deom4=new Slider($('container'),$('block4'),$('scroll4'),{shapechange:false,topvalue:11,bottomvalue:12,border:1});addListener($('p1'),'click',Bind(deom4,deom4.Left));addListener($('p2'),'click',Bind(deom4,deom4.Right));//================================================================================================new Slider($('con1'),$('block5'),$('scroll5'));}</script></body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: