开发学院网页设计 JavaScript JavaScript 无缝上下(左右)滚动加定高(定宽)停顿效... 阅读

JavaScript 无缝上下(左右)滚动加定高(定宽)停顿效果

　2010-09-14 13:27:39　来源：WEB开发网　闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹

闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偛顦甸弫鎾绘偐閹绘帞鈧參姊哄Ч鍥х仼闁诲繑鑹鹃悾鐑藉蓟閵夛妇鍘甸梺瑙勵問閸犳牠銆傛總鍛婄厱閹艰揪绱曟牎闂侀潧娲ょ€氫即鐛幒妤€绠ｆ繝闈涘暙娴滈箖鏌ｉ姀鈶跺湱澹曟繝姘厵闁绘劦鍓氶悘杈ㄤ繆閹绘帞澧涚紒缁樼洴瀹曞崬螖閸愬啠鍓濈换娑樼暆婵犱胶鏁栫紓浣介哺閹瑰洤鐣烽幒鎴僵闁瑰吀鐒﹂悗鎼佹⒒娴ｇ儤鍤€闁搞倖鐗犻獮蹇涙晸閿燂拷

濠电姷鏁告慨鐑藉极閸涘﹥鍙忔い鎾卞灩缁狀垶鏌涢幇闈涙灈鐎瑰憡绻冮妵鍕箻鐎靛摜鐣奸梺纭咁潐濞茬喎顫忕紒妯肩懝闁逞屽墮宀ｈ儻顦查悡銈夋煏閸繃鍋繛宸簻鎯熼梺瀹犳〃閼冲爼宕濋敃鈧—鍐Χ閸℃鐟愰梺鐓庡暱閻栧ジ宕烘繝鍥у嵆闁靛骏绱曢崢顏堟⒑閹肩偛鍔楅柡鍛⊕缁傛帟顦寸紒杈ㄥ笚濞煎繘鍩℃担閿嬵潟闂備浇妗ㄩ悞锕傚箲閸ヮ剙鏋侀柟鍓х帛閺呮悂鏌ㄩ悤鍌涘闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹　　闂傚倸鍊搁崐鎼佸磹閻戣姤鍤勯柤鍝ユ暩娴犳氨绱撻崒娆掑厡缂侇噮鍨堕妴鍐川閺夋垹鍘洪悗骞垮劚椤︻垶宕￠幎鑺ョ厪闊洦娲栨牎闂佽瀵掗崜鐔奉潖閾忓湱纾兼俊顖氭惈椤矂姊虹拠鑼婵ǜ鍔戦崺鈧い鎺嶇閸ゎ剟鏌涢幘璺烘瀻妞ゎ偄绻愮叅妞ゅ繐瀚悗顓烆渻閵堝棙绀€闁瑰啿閰ｅ畷婊勫鐎涙ǚ鎷洪梻渚囧亞閸嬫盯鎳熼娑欐珷妞ゆ柨澧界壕鐓庮熆鐠虹尨鍔熺紒澶庢閳ь剚顔栭崰鏍€﹂柨瀣╃箚婵繂鐭堝Σ鐑芥⒑缁嬫鍎愰柟鐟版搐铻為柛鎰╁妷濡插牊绻涢崱妤冪婵炲牊锕㈠缁樻媴妞嬪簼瑕嗙紓鍌氱М閸嬫挻绻涚€涙ḿ鐭ら柛鎾跺枛瀹曟椽鍩€椤掍降浜滈柟鐑樺灥閳ь剙缍婂鎶筋敆閸曨剛鍘遍柣搴秵娴滅兘鐓鍌楀亾鐟欏嫭纾婚柛妤€鍟块锝夊磹閻曚焦鞋闂備礁鎼Λ瀵哥不閹捐钃熼柕濞炬櫆閸嬪棝鏌涚仦鍓р槈妞ゅ骏鎷�

核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln

<!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>JavaScript 无缝上下(左右)滚动加定高(定宽)停顿效果(兼容ie/ff)</title> </head> <body> <script type="text/javascript"> var $ = function (id) { 　　return "string" == typeof id ? document.getElementById(id) : id; }; 　　 var Class = { 　create: function() { 　　return function() { 　　　this.initialize.apply(this, arguments); 　　} 　} } 　　 Object.extend = function(destination, source) { 　　for (var property in source) { 　　　　destination[property] = source[property]; 　　} 　　return destination; } 　　 function addEventHandler(oTarget, sEventType, fnHandler) { 　　if (oTarget.addEventListener) { 　　　　oTarget.addEventListener(sEventType, fnHandler, false); 　　} else if (oTarget.attachEvent) { 　　　　oTarget.attachEvent("on" + sEventType, fnHandler); 　　} else { 　　　　oTarget["on" + sEventType] = fnHandler; 　　} }; 　　 var Scroller = Class.create(); Scroller.prototype = { 　initialize: function(idScroller, idScrollMid, options) { 　　var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid); 　　　　this.SetOptions(options); 　　this.Scroller = oScroller;　　　　this.Speed = this.options.Speed; 　　this.timer = null; 　　this.Pause = 0; 　　　　//用于上下滚动　　this.heightScroller = parseInt(oScroller.style.height) || oScroller.offsetHeight; 　　this.heightList = oScrollMid.offsetHeight; 　　　　//用于左右滚动　　this.widthScroller = parseInt(oScroller.style.width) || oScroller.offsetWidth; 　　this.widthList = oScrollMid.offsetWidth; 　　　　//js取不到css设置的height和width 　　　　oScroller.style.overflow = "hidden"; 　　oScrollMid.appendChild(oScrollMid.cloneNode(true)); 　　　　//方向设置　　switch (this.options.Side.toLowerCase()) { 　　　　case "right" : 　　　　　　if(this.widthList <= this.widthScroller) return; 　　　　　　this.Scroll = this.ScrollLeftRight; 　　　　　　this.side = -1; 　　　　　　break; 　　　　case "left" : 　　　　　　if(this.widthList <= this.widthScroller) return; 　　　　　　this.Scroll = this.ScrollLeftRight; 　　　　　　this.side = 1; 　　　　　　break; 　　　　case "down" : 　　　　　　if(this.heightList <= this.heightScroller) return; 　　　　　　this.Scroll = this.ScrollUpDown; 　　　　　　this.side = -1; 　　　　　　break; 　　　　case "up" : 　　　　default : 　　　　　　if(this.heightList <= this.heightScroller) return; 　　　　　　this.Scroll = this.ScrollUpDown; 　　　　　　this.side = 1; 　　} 　　　　addEventHandler(oScroller, "mouseover", function() { oScroll.Stop(); }); 　　addEventHandler(oScroller, "mouseout", function() { oScroll.Start(); }); 　　　　this.Start(); 　}, 　//设置默认属性　SetOptions: function(options) { 　　this.options = {//默认值　　　Step:　　　　　　1,//每次变化的px量　　　Speed:　　　　20,//速度(越大越慢) 　　　Side:　　　　　　"up",//滚动方向:"up"是上，"down"是下，"left"是左，"right"是右　　　PauseHeight:　　0,//隔多高停一次　　　PauseWidth:　　0,//隔多宽停一次　　　PauseStep:　　1000//停顿时间(PauseHeight或PauseWidth大于0该参数才有效) 　　}; 　　Object.extend(this.options, options || {}); 　},　　//上下滚动　ScrollUpDown: function() { 　　this.Scroller.scrollTop = this.GetScroll(this.Scroller.scrollTop, this.heightScroller, this.heightList, this.options.PauseHeight); 　　　　var oScroll = this; 　　this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, this.Speed); 　}, 　//左右滚动　ScrollLeftRight: function() { 　　//document.getElementById("test").innerHTML+=iStep+","; 　　//注意:scrollLeft超过1400会自动变回1400 注意长度　　this.Scroller.scrollLeft = this.GetScroll(this.Scroller.scrollLeft, this.widthScroller, this.widthList, this.options.PauseWidth); 　　　　var oScroll = this; 　　this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, this.Speed); 　}, 　//获取设置滚动数据　GetScroll: function(iScroll, iScroller, iList, iPause) { 　　var oScroll = this, iStep = this.options.Step * this.side; 　　　　if(this.side > 0){ 　　　　if(iScroll >= (iList * 2 - iScroller)){ iScroll -= iList; } 　　} else { 　　　　if(iScroll <= 0){ iScroll += iList; } 　　} 　　　　this.Speed = this.options.Speed; 　　if(iPause > 0){ 　　　　if(Math.abs(this.Pause) >= iPause){ 　　　　　　this.Speed = this.options.PauseStep; this.Pause = iStep = 0; 　　　　} else { 　　　　　　this.Pause += iStep; 　　　　} 　　} 　　　　return (iScroll + iStep); 　}, 　//开始　Start: function() { 　　this.Scroll(); 　}, 　//停止　Stop: function() { 　　clearTimeout(this.timer); 　} }; 　　 window.onload = function(){ 　　new Scroller("idScroller", "idScrollMid",{ Side:"up", PauseHeight:25 }); 　　new Scroller("idScroller1", "idScrollMid1",{ Side:"right", PauseWidth:250, Speed:10 }); } </script> <style> .Scroller *{}{margin:0px; padding:0px;} .Scroller {}{line-height:25px;overflow:hidden; border:1px solid #000000;} 　　 #idScrollMid ul{}{width:500px;} #idScrollMid li{}{width:250px;float:left; overflow:hidden; list-style:none;} 　　 #idScrollMid1 {}{float:left;} #idScrollMid1 ul{}{width:250px;float:left;overflow:hidden;} #idScrollMid1 li{}{list-style:none;} </style> <div id="idScroller" class="Scroller" style="width:500px; height:50px;"> 　<div id="idScrollMid"> 　　<ul> 　　　<li><a href="http://shundebk.cn/">111111111111111111111</a></li> 　　　<li><a href="http://shundebk.cn/">211111111111111111111</a></li> 　　　<li><a href="http://shundebk.cn/">311111111111111111111</a></li> 　　　<li><a href="http://shundebk.cn/">411111111111111111111</a></li> 　　　<li><a href="http://shundebk.cn/">511111111111111111111</a></li> 　　　<li><a href="http://shundebk.cn/">611111111111111111111</a></li> 　　</ul> 　　<div style="clear:both;"></div> 　</div> </div> <br /> <br /> <br /> <div id="idScroller1" class="Scroller" style="width:500px; height:50px;"> 　<div style="width:2000px"> 　　<div id="idScrollMid1"> 　　　<ul> 　　　　<li> <a href="http://shundebk.cn/">1111111111111111111111</a></li> 　　　　<li> <a href="http://shundebk.cn/">2111111111111111111111</a></li> 　　　</ul> 　　　<ul> 　　　　<li> <a href="http://shundebk.cn/">1211111111111111111111</a></li> 　　　　<li> <a href="http://shundebk.cn/">2211111111111111111111</a></li> 　　　</ul> 　　　<ul> 　　　　<li> <a href="http://shundebk.cn/">1311111111111111111111</a></li> 　　　　<li> <a href="http://shundebk.cn/">2311111111111111111111</a></li> 　　　</ul> 　　</div> 　</div> </div> <div id="test"></div> </body> </html>