嘿嘿，俺的不间断循环滚动类

2008年10月5日 0条评论 1,006次阅读 0人点赞

原文地址 http://bbs.blueidea.com/thread-2638838-1-1.html

嘿嘿，我保证绝对比你能找到的大部分脚本都要好用。

点击这里下载

调用的方法：

首先你得把脚本链接到你的页面，或者直接调用下面这个链接也行。当然，最好还是下载到你自己的机器上。

复制内容到剪贴板

代码:

<script type="text/javascript" src="http://www.aeroom.org/include/scripts/scrollingAD.js"></script>

下面是第一种使用方法，看起来似乎比较麻烦一点，但是只需要两行代码；

复制内容到剪贴板

代码:

var sampleDiv = new scrollingAD("divId", 200, 100, "yellow", "up", 10, 2000, 20, true); sampleDiv.move();

这样将根据文档中 id=”divId” 的某个 DIV 对象来创建一个不间断的循环滚动区域。该区域的宽度为 200px，高度为 100px，背景颜色为黄色（不用担心你的英文不好，也可以用“#ff00ff”这样的格式），方向为向上滚动。其实你也可以选择向左滚动，只要把 “up” 改成 “left” 就行了。但是不支持向右和向下滚动，所以不用尝试 “right” 和 “down”——其实要实现这两个方向也很容易，不过个人觉得不太实用，所以就没做了——每滚动 1px 的延迟时间为 10ms，也就是理想状态下是每秒钟滚动 100px。每滚动 20px 暂停一次，每次暂停的时间是 2 秒。并且支持鼠标悬停。

上面提到的参数的排列顺序是必须严格遵守的，也就是说得按照下面的顺序来排列。如果你想偷懒，可以使用逗号略过：

引用:

1、图层的 ID，必须的参数，不填或者拼写错误将会报错；
2、滚动区域的宽度，默认值是 200px，所有的默认值都可以在 scrollingAD 里面修改；
3、滚动区域的高度，默认值是 50px；
4、背景颜色，默认值是 “transparent”，也就是透明啦；
5、方向，可选值 “up/left”；
6、每滚动 1px 的延迟时间，默认值 20，单位是 ms——这个值越大滚动越慢；
7、每滚动限定距离后停滞的时间，单位也是 ms，默认值 2000，也就是 2 秒啦——如果你不想停滞的话，把它设为 0 就行了；
8、每两次停滞之间滚动的距离，默认值是一屏。也就是说如果你设定的方向是 “up” 的话，默认值即等于滚动区域的高度，反之方向为 “left”，则默认值为滚动区域的宽度；
9、是否悬停，默认是 true，这个你不填也没关系；

第二种方法是这样的：

复制内容到剪贴板

代码:

var sampleDiv = new scrollingAD("divId"); sampleDiv.move();

这样使用的全部都是默认值，不过你应该会觉得必须改掉某个参数才行，那你可以这样：

复制内容到剪贴板

代码:

var sampleDiv = new scrollingAD("divId"); sampleDiv.width = 500; sampleDiv.height = 100; sampleDiv.bgColor = "red"; sampleDiv.direction = "left"; sampleDiv.delay = 10; sampleDiv.pauseTime = 1000; sampleDiv.size = 50; sampleDiv.isHover = false; sampleDiv.move();

当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。

需要注意的是，你应该使用这样的顺序来建立这个滚动区域：

提示：您可以先修改部分代码再运行

忘了说一下了，支持 firefox，Opera 没试，估计问题不大哈。

丫的，今天居然网站龟速，因为是在公司写的，所以一开始贴的是吾网站的链接，现在再贴一个：

<head> <title>效果演示</title> </head> <body> <h3>建立图层</h3> <div id=”sampleDiv” style=”font-size: 12px; line-height: 20px;”> 当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。 </div> <h3>然后调用脚本文件</h3> <script type=”text/javascript”> function scrollingAD(_id, _width, _height, _bgColor, _direction, _delay, _pauseTime, _size, _isHover) { 	this.id              = _id; 	this.width           = _width; 	this.height          = _height; 	this.bgColor         = _bgColor; 	this.direction       = _direction; 	this.delay           = _delay; 	this.pauseTime       = _pauseTime; 	this.size            = _size; 	this.object          = null; 	this.isMove          = true; 	 	if((this.id == “”) || (this.id == null)) { 		alert(“必须输入对象的 ID 才能创建滚动区域！”); 		this.isMove = false; 		return false; 	} 	 	if(document.getElementById(this.id)) { 		this.object = document.getElementById(this.id); 	} else { 		window.alert(“滚动区域创建失败！\n请确认 ” + this.id + ” 是否拼写错误。”); 		this.isMove = false; 		return false; 	} } scrollingAD.prototype.checkNumber = function(_attribute, defaultValue) {	 	if(isNaN(_attribute)) { 		return defaultValue; 	} else { 		return ((typeof(parseInt(_attribute)) == “number”) ? parseInt(_attribute) : defaultValue); 	} } scrollingAD.prototype.move = function() { 	if(this.isMove == false) return false; 	 	var defaultWidth           = 200; 	var defaultHeight          = 50; 	var defaultDelay           = 20; 	var defaultPauseTime       = 2000; 	var defaultIsHover         = true; 	var defaultBgColor         = “transparent”; 	var defaultDirection       = “up”; 	 	this.width          = this.checkNumber(this.width, defaultWidth); 	this.height         = this.checkNumber(this.height, defaultHeight); 	this.delay          = this.checkNumber(this.delay, defaultDelay); 	this.pauseTime      = this.checkNumber(this.pauseTime, defaultPauseTime); 	this.isHover        = (typeof(this.isHover) == “boolean”) ? this.isHover : defaultIsHover; 	 	if(this.direction == “left”) { 		this.size       = this.checkNumber(this.size, this.width); 	} else { 		this.size       = this.checkNumber(this.size, this.height); 	} 	 	if((this.bgColor == null) || (typeof(this.bgColor) == undefined)) { 		this.bgColor = defaultBgColor; 	} else { 		this.bgColor = this.bgColor; 	} 	 	if((this.direction == null) || (typeof(this.direction) == undefined)) { 		this.direction = defaultDirection;	 	} else { 		this.direction = (this.direction.search(/(^up$)|(^left$)/gi) != -1) ? this.direction.toLowerCase() : defaultDirection; 	} 	 	// 创建滚动区域； 	with(this.object) { 		style.display         = “block”; 		style.width           = this.width + “px”; 		style.height          = this.height + “px”; 		style.overflow        = “hidden”; 		style.backgroundColor = this.bgColor; 	} 	 	if(this.direction == “up”) { 		this.object.innerHTML = “<div id=\”” + this.id + “_mirror\”>” + this.object.innerHTML + “</div>” + “<div>” + this.object.innerHTML + “</div><input type=\”hidden\” value=\”1\” id=\”” + this.id + “_isHover\” />”; 	} else { 		this.object.innerHTML = “<span id=\”” + this.id + “_mirror\”>” + this.object.innerHTML + “</span>” + “<span>” + this.object.innerHTML + “</span><input type=\”hidden\” value=\”1\” id=\”” + this.id + “_isHover\” />”; 	} 		 	if(document.getElementById(this.id)) { 		var evalString; 		if(this.direction == “up”) { 			evalString = “scrollToUp(\”” + this.id + “\”, ” + this.isHover + “, ” + this.delay + “, ” + this.size + “, ” + this.pauseTime + “, 0) “; 		} else { 			evalString = “scrollToLeft(\”” + this.id + “\”, ” + this.isHover + “, ” + this.delay + “, ” + this.size + “, ” + this.pauseTime + “, 0) “; 		} 		eval(evalString); 		 	} else { 		return false; 	} 	 	function pixelToNum(_string)	{ 	//该函数用于去掉数值后面的px，并将之转化为数字。 		if(_string.slice(_string.length – 2) == “px”) { 			return parseInt(_string.slice(0, (_string.length – 2))); 		} else  { 			return _string; 		} 	} 	 	function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) { 		var obj = document.getElementById(_id); 		var mirror = document.getElementById(_id + “_mirror”);	 		 		if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) { 			var evalString =_id + “_timer = window.setTimeout(function() {scrollToLeft(\”” + _id + “\”, ” + _isHover + “, ” + _delay + “, ” + _size + “, ” + _pauseTime + “, ” + _s + “);}, ” + _delay + “)”; 		 			if(_isHover) { 				mirror.onmouseover = function() {document.getElementById(_id + “_isHover”).value = 0;} 				mirror.onmouseout  = function() {document.getElementById(_id + “_isHover”).value = 1;} 				var step = parseInt(document.getElementById(_id + “_isHover”).value); 				mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) – step) + “px”;	 				eval(“var ” + evalString); 			} else {				 				mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) – 1) + “px”;	 				eval(“var ” + evalString); 			} 		} else { 			if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) { 				_s += 1; 				window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); 			} else { 				mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + “px”;; 				window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); 			} 		} 		 	} 	function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) { 		var obj = document.getElementById(_id); 		var mirror = document.getElementById(_id + “_mirror”);	 		 		if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) { 			var evalString =_id + “_timer = window.setTimeout(function() {scrollToUp(\”” + _id + “\”, ” + _isHover + “, ” + _delay + “, ” + _size + “, ” + _pauseTime + “, ” + _s + “);}, ” + _delay + “)”; 		 			if(_isHover) { 				mirror.onmouseover = function() {document.getElementById(_id + “_isHover”).value = 0;} 				mirror.onmouseout  = function() {document.getElementById(_id + “_isHover”).value = 1;} 				var step = parseInt(document.getElementById(_id + “_isHover”).value); 				mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) – step) + “px”;	 				eval(“var ” + evalString); 			} else {				 				mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) – 1) + “px”;	 				eval(“var ” + evalString); 			} 		} else { 			if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) { 				_s += 1; 				window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); 			} else { 				mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + “px”;; 				window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); 			} 		} 	} } </script> <h3>最后建立滚动区域</h3> <script type=”text/javascript”> // <![CDATA[ var sampleDiv = new scrollingAD(“sampleDiv”); sampleDiv.width = 200; sampleDiv.height = 20; sampleDiv.bgColor = “yellow”; sampleDiv.move(); // ]]> </script> <p>如果脚本报错，可能是因为我的网站速度连接太慢的原因，只要刷新一下页面就行了。</p> </body> </html>

提示：您可以先修改部分代码再运行更新：
现在可以使用百分比来定义 size 参数了，像这样：

复制内容到剪贴板