从网上转载(http://www.cnblogs.com/skyblue/archive/2010/08/07/1794754.html)的一个关于JS的无缝上下滚动效果图,我准备把它搬到项目当中,所以先记录在博客里,方便之后查找. <!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> </head> <body> <mce: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.heightScroller = oScroller.offsetHeight; this.heightList = oScrollMid.offsetHeight; if(this.heightList <= this.heightScroller) return; oScroller.style.overflow = "hidden"; oScrollMid.appendChild(oScrollMid.cloneNode(true)); this.oScroller = oScroller; this.timer = null; this.SetOptions(options); this.side = 1;//1是上 -1是下 switch (this.options.Side) { case "down" : this.side = -1; break; case "up" : default : this.side = 1; } addEventHandler(oScrollMid , "mouseover", function() { oScroll.Stop(); }); addEventHandler(oScrollMid , "mouseout", function() { oScroll.Start(); }); if(this.options.PauseStep <= 0 || this.options.PauseHeight <= 0) this.options.PauseStep = this.options.PauseHeight = 0; this.Pause = 0; this.Start(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Step: 1,//每次变化的px量 Time: 20,//速度(越大越慢) Side: "up",//滚动方向:"up"是上,"down"是下 PauseHeight: 0,//隔多高停一次 PauseStep: 1000//停顿时间(PauseHeight大于0该参数才有效) }; Object.extend(this.options, options || {}); }, //滚动 Scroll: function() { var iScroll = this.oScroller.scrollTop, iHeight = this.heightList, time = this.options.Time, oScroll = this, iStep = this.options.Step * this.side; if(this.side > 0){ if(iScroll >= (iHeight * 2 - this.heightScroller)){ iScroll -= iHeight; } } else { if(iScroll <= 0){ iScroll += iHeight; } } if(this.options.PauseHeight > 0){ if(this.Pause >= this.options.PauseHeight){ time = this.options.PauseStep; this.Pause = 0; } else { this.Pause += Math.abs(iStep); this.oScroller.scrollTop = iScroll + iStep; } } else { this.oScroller.scrollTop = iScroll + iStep; } this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, time); }, //开始 Start: function() { this.Scroll(); }, //停止 Stop: function() { clearTimeout(this.timer); } }; window.onload = function(){ new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 }); } // --></mce:script> <mce:style><!-- #idScroller *{margin:0px; padding:0px;} #idScroller{line-height:25px;width:100%; height:25px; overflow:hidden; border:1px solid #000000;} #idScroller ul{width:100%} #idScroller li{width:20%; float:left; overflow:hidden; list-style:none;} --></mce:style><style mce_bogus="1">#idScroller *{margin:0px; padding:0px;} #idScroller{line-height:25px;width:100%; height:25px; overflow:hidden; border:1px solid #000000;} #idScroller ul{width:100%} #idScroller li{width:20%; float:left; overflow:hidden; list-style:none;}</style> <div id="idScroller"> <div id="idScrollMid"> <ul> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">111111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">211111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">311111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">411111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">511111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">611111111111111111111</a></li> </ul> <div style="clear:both;" mce_style="clear:both;"></div> </div> </div> </body> </html>