当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 非常不错的不间断循环滚动类 兼容多浏览器

Javascript
JavaScript 序列化对象实现代码
替代window.event.srcElement效果的可兼容性的函数
div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
IE和Firefox下event事件杂谈
javascript option onclick事件ie解决方案 兼容ie,firefox
javascript demo 基本技巧
用js实现层随着内容大小动态渐变改变 推荐
JS 的应用开发初探(mootools)
JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
JQuery Tips(4) 一些关于提高JQuery性能的Tips
jQuery 淡入淡出、展开收缩菜单实现代码
js控制div及网页相关属性的代码
javascript 翻页测试页(动态创建标签并自动翻页)
Js获取table当前tr行的值的代码
IE 上下滚动展示模仿Marquee机制
jQuery解决iframe高度自适应代码
jQuery 连续列表实现代码
利用jQuery的$.event.fix函数统一浏览器event事件处理
Javascript和Ajax中文乱码吐血版解决方案
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 126 ::
收藏到网摘: n/a

调用的方法:
首先你得把脚本链接到你的页面,或者直接调用下面这个链接也行。当然,最好还是下载到你自己的机器上。
复制代码 代码如下:
<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();

当然你不需要像上面这样全部写出来,你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域,但是又在后面用这种方式修改过了,则以后面的为准。
需要注意的是,你应该使用这样的顺序来建立这个滚动区域:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
提示:您可以先修改部分代码再运行
更新:
现在可以使用百分比来定义 size 参数了,像这样:
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.size = "50%";// 注意,一定要加引号,否则会出错。
sampleDiv.move();
得到的效果就是一个循环只滚动两次,同理一次滚完一个循环的话,将 size 设置为 "100%" 就行了。不过不建议随意设置百分比,请尽量设置成与行数相符的数值,否则可能出现意外的空白。
当然,仍然支持数字:)