繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 非常不错的不间断循环滚动类 兼容多浏览器
- Javascript
- QQ邮箱的一个文本编辑器代码
- Z-Blog中用到的js代码
- 绝对经典的滑轮新闻显示(javascript+css)实现
- 用js实现的仿sohu博客更换页面风格（简单版）
- 仿Vista进程条效果
- 用Javascript判断图片是否存在，不存在则显示默认图片的代码
- 用JQuery 实现的自定义对话框
- jQuery使用手册之三 CSS操作
- 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
- 贴图转换+转贴工具用到的js代码超级推荐
- 超级简单的图片防盗(HTML),好用
- 现代 javscript 编程 资料
- 超级可爱纯js网页时钟
- Dojo之路:如何利用Dojo实现Drag and Drop效果
- AJAX架构之Dojo篇
- 发两个小东西，ASP/PHP 学习工具。 用JavaScript写的
- 使用prototype.js 的时候应该特别注意的几个问题.
- 一个已封装好的漂亮进度条
- 漂亮的widgets，支持换肤和后期开发新皮肤
- 用javascript实现的仿Flash广告图片轮换效果
Javascript 中的 非常不错的不间断循环滚动类 兼容多浏览器
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 211 ::
收藏到网摘: 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();
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，这个你不填也没关系；
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();
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 全选 提示:你可先修改部分代码,再按运行]
提示：您可以先修改部分代码再运行 [Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
更新：
现在可以使用百分比来定义 size 参数了，像这样：
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.size = "50%";// 注意，一定要加引号，否则会出错。
sampleDiv.move();
得到的效果就是一个循环只滚动两次，同理一次滚完一个循环的话，将 size 设置为 "100%" 就行了。不过不建议随意设置百分比，请尽量设置成与行数相符的数值，否则可能出现意外的空白。
当然，仍然支持数字：）
评论 (0) All
