<!
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
>
根据
上一篇做的改进
效果
转载于:https://www.cnblogs.com/cloudgamer/archive/2008/04/29/1176296.html
相关资源：数据结构—成绩单生成器
