多款模仿转动条结果 JS+CSS实当代码

发布时间：2018-08-20 16:53:25 所属栏目：访谈来源：站长网

导读：这是猛火小编从网上转过来的。做了些修改，着实写的较量糟糕(我指的是结构) 我用的是早年的一个drag类在这个基本上在的来完成的Slider ，其拭魅这样代码发生些了冗余.......不如单独写个Slider类做为第一个版本照旧生涯起来偶然刻的话试着单独的写个Slid

　　这是猛火小编从网上转过来的。做了些修改，着实写的较量糟糕(我指的是结构) 我用的是早年的一个drag类在这个基本上在的来完成的Slider ，其拭魅这样代码发生些了冗余.......不如单独写个Slider类做为第一个版本照旧生涯起来偶然刻的话试着单独的写个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>多款模仿转动条结果 JS+CSS实当代码 - Liehuo.Net</title> <style type="text/css"> /* 本殊效来自猛火网　http://www.veryhuo.com */ #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(/uploads/allimg/100312/171203276_p.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(/uploads/allimg/100312/103129203_p.gif); width:26px; height:34px;} .b2-1{background:transparent url(/uploads/allimg/100312/103129125_p.gif) no-repeat scroll center center; width:20px; height:161px; margin-left:4px;} .b2-2{background-image:url(/uploads/allimg/100312/103129000_p.gif); height:22px; width:20px; position:absolute} .b2-3{background-image:url(/uploads/allimg/100312/103128390_p.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(/uploads/allimg/100312/232151437_p.gif); height:20px; width:30px; background-position:-182px 0px; float:left; } .b3-l3{font-size:0px; background-image:url(/uploads/allimg/100312/232151437_p.gif);height:20px; width:600px; background-position:0px -226px; float:left;} .b3-l4{background-image:url(/uploads/allimg/100312/232151437_p.gif); height:20px; width:162px; background-position:-14px 0px; position:absolute} .b3-l5{font-size:0px; background-image:url(/uploads/allimg/100312/232151437_p.gif); height:20px; width:30px; background-position:-216px 0px; float:left;} /*====================================================================*/ .b4-1{font-size:0px; height:17px; width:15px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:-15px 0; margin:0px;} .b4-2{font-size:0px; height:166px; width:15px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:-30px 0; } .b4-3{font-size:0px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:-45px 0; position:absolute; height:17px; width:15px; } .b4-4{font-size:0px; height:17px; width:15px; background-image:url(/uploads/allimg/100312/145213218_p.gif); background-position:0 0;margin:0px;} /*====================================================================*/ .b5-1{background:url(/uploads/allimg/100312/111957390_p.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;"> <br> <div id='a1' class="b1" > <img id='block1' src='/uploads/allimg/100312/171041823_p.gif' style="position: absolute; margin-top:3px;"> </div> <div id='info1'>0%</div> <br> <div> <div class="b2"></div> <div id="a2" class="b2-1"> <div id='block2' class="b2-2"></div> </div> <div class="b2-3"></div> </div> <div id='info2'>0%</div> <br> <div class="b3"> <div id="a3" class="b3-1"> <div class="b3-2"> <table width="1680" height="180" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="210" align="center"> <img src='/uploads/Common/images/liehuo_net_m0.jpg'> </td> <td width="210" align="center"> <img src="/uploads/Common/images/liehuo_net_m1.jpg"> </td> <td width="210" align="center"> <img src="/uploads/Common/images/liehuo_net_m2.jpg"> </td> <td width="210" align="center"> <img src="/uploads/Common/images/liehuo_net_m3.jpg"> </td> <td width="210" align="center"> <img src="/uploads/Common/images/liehuo_net_m4.jpg"> </td> <td width="210" align="center"> <img src="/uploads/Common/images/liehuo_net_m5.jpg"> </td> <td width="210" align="center"> <img src="/uploads/Common/images/liehuo_net_m6.jpg"> </td> <td width="210" align="center"> <img src="/uploads/Common/images/liehuo_net_m7.jpg"> </td> </tr> </table> </div> <div class="b3-l1"> <div id='la' class="b3-l2"></div> <div id="scroll3" class="b3-l3"> <div id ="block3" class="b3-l4"></div> </div> <div id='r' class="b3-l5"></div> </div> </div> </div> <br> <div id="container"> <div id="content"> <div>人族</div> <div>SKY流--强盛的中国选手人皇sky的成名特技</div> <div>KUA流--多不兵共同MK,前期可谓遇佛神通杀</div> <div>3法流--好象只是很好打兽族,打精灵还得共同小炮</div> <div>骑士狮鸠流--共同圣骑的3级光环全防心灵之火,绝对bug</div> <div>超逸流--3蛋的成名特技,首发圣骑,打得亡灵一样平常没的性情</div> <div>机器流--飞机加坦克,曾经风靡一时,moon也亏损无数</div> <div>万精油--3发+火枪+小炮,稳固应万变的打法</div> <div>兽族</div> <div>跑狼骑--狼骑的高速移动,城攻与网,拆家起来无人能敌</div> <div>速飞龙--较量谋利的打法,一旦谋利乐成,对方可以直接gg</div> <div>利害牛--共同撒满,高攻,高防,高攻速,高血,无穷复生</div> <div>白牛海--得当内战,无穷复生且20的进攻打兽身上2倍加成</div> <div>XXXX流--猎头+巫医+撒满,orc期间的bug,现在很丢脸到</div> <div>万精油--大G+狼骑+白牛+科多,最通例的打法</div> <div>不死族</div> <div>蜘蛛流--蜘蛛的高功,加上不死好汉的强盛邪术,强</div> <div>冰甲蜘蛛流--首要反抗兽族,让蜘蛛,亡骑更难打.</div> <div>西瓜流--中国天灾Ted的成名特技,女妖给兵套个盾,象西瓜</div> <div>天地双鬼--有段时刻一向被精灵以为是bug.</div> <div>胖子歼灭--高攻,高防,高血,且无视邪术结果</div> <div>骷髅海--可以看到满天的骷髅雄师(驱散法师小精灵完克)</div> <div>精灵族</div> <div>女猎流1--NEvsNE,一样平常虎MM共同大量女猎,满是MM.</div> <div>女猎流2--NEvsHUM,SM女王共同大量女猎禁止人族速矿</div> <div>吹风骚--曾经的兽族客星,绮丽,超逸,==</div> <div>大树流--许多许多大树共同许多许多的ac,时势壮观</div> <div>弩车流--根基只有耳闻没见过</div> <div>乱矿流--Moon的成名特技,一个矿被拆了,2个矿起来了</div> <div>三远流--ACMM+鹿MM+得鲁伊大叔,把任何物体射成马蜂窝</div> </div> <div id="scroll"> <div id='p1' class="b4-1"></div> <div id="scroll4" class="b4-2"> <div id="block4" class="b4-3"> </div> </div> <div id='p2' class="b4-4"></div> </div> </div> <br> <div class="b5-1"> <div id='con1' class="b5-2"> <div id='ccc1' class="b5-3"> 　　<span class="b5-4">1.出身</span><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> 　　·砂流葬：节制方针下方的沙，制成流沙，将方针陷入地下200米处压死灭砂瀑葬<br> 　　·灭砂瀑葬：在沙地上开出庞大裂口，使敌手陷入沙层以下。当沙子完全隐蔽后，将查克拉<br> 　　齐集于左手，使沙子放射出与地动般强盛的震感爆炸力，杀伤力极强<br> 　　·砂缚牢：沙缚柩扩大版.将困住敌手的沙缚柩浮于半空操作周围的风沙共同查克拉举办方型式四周扭曲、挤压，最后爆破沙牢<br> 　　·假寐之术（狸寝术）：催眠术,让本身深度甜睡,以发作出守鹤<br> 　　·砂之眼：在被完全包裹住本身时，为了探清表面的环境做了一个眼睛。可是这不是平凡的沙眼，和视神经是毗连的<br> 　　·砂雷针：剧场版『幻之地底遗迹』中我爱罗行使的绝招，将沙子做成针状散布在仇人附近，发生雷电进攻仇人<br> 　　.风遁·无穷砂尘大打破：风遁稠浊着沙子，进攻大范畴内的仇人<br> 　　.风遁·练空弹：用大量查克拉压缩做成的氛围波进攻仇人<br> 　　·砂漠浮游：操作沙将本身及李洛克升到空中，以避过君麻吕可怕之术－早蕨之舞（把大地化为尸骸）<br> 　　·沙瀑意流：将大片的岩石化为沙子<br> 　　·砂尘双击 <br> 　　·砂尘冥柩 <br> 　　沙阵雨:,可使敌手的脚无法动<br> </div> <div id='scroll5' class="b5-5"> <div id="block5" class="b5-6"> </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.<b>Firefox</b> = ua.match(/firefox/([d.]+)/)?true:false; s.<b>Chrome</b> = 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.<b>IE8</b> = (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) //配置了限定和容器限定后计较界线直 { 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(); } else removeListener(window, "blur", this._fS); this.Onstop(); } }); var Slider = new Class({ options :{ direction : true, //true为纵,false为横 type : "Y", //别离为X,Y,N shapechange : true, //是否该变转动条的外形 topvalue : 0, //上或左毛病值 bottomvalue : 0, //下或右毛病值 border : 0, //处理赏罚ie下border的题目 step : 1, //键盘操纵时辰的步长 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; /*==========================================================================================================================*/ /*假如转动条不是单独的图片可以用div模仿这时辰就得配置转动条的长度可能宽度了按比例配置*/ 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); //键盘与鼠标滑轮部门参考的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也要算进去否则有偏差 ie8,却又不必要算真是纠结............ 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); /*上面为转动条的计较方法*/ /*=========================================================================================================================*/ 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> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!