您的位置:首页 > 其它

非常不错的不间断循环滚动类 兼容多浏览器

2006-12-27 00:00 507 查看
调用的方法:
首先你得把脚本链接到你的页面,或者直接调用下面这个链接也行。当然,最好还是下载到你自己的机器上。
复制代码 代码如下: <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(); 
当然你不需要像上面这样全部写出来,你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域,但是又在后面用这种方式修改过了,则以后面的为准。
需要注意的是,你应该使用这样的顺序来建立这个滚动区域: 
效果演示

建立图层

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

然后调用脚本文件

" + "" + this.object.innerHTML + " "; } else { this.object.innerHTML = "" + this.object.innerHTML + "" + "" + this.object.innerHTML + ""; } 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); } } } }

最后建立滚动区域

如果脚本报错,可能是因为我的网站速度连接太慢的原因,只要刷新一下页面就行了。


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息