找回密码
 注册

QQ登录

只需一步,快速开始

查看: 26171|回复: 27

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

[复制链接]
发表于 2006-6-30 23:45:00 | 显示全部楼层 |阅读模式
嘿嘿,我保证绝对比你能找到的大部分脚本都要好用。

点击这里下载

调用的方法:

首先你得把脚本链接到你的页面,或者直接调用下面这个链接也行。当然,最好还是下载到你自己的机器上。
  1. <script type="text/javascript" src="http://www.aeroom.org/include/scripts/scrollingAD.js"></script>
复制代码


下面是第一种使用方法,看起来似乎比较麻烦一点,但是只需要两行代码;
  1. var sampleDiv = new scrollingAD("divId", 200, 100, "yellow", "up", 10, 2000, 20, true);
  2. 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,这个你不填也没关系;
   
第二种方法是这样的:
  1. var sampleDiv = new scrollingAD("divId");
  2. sampleDiv.move();
复制代码

这样使用的全部都是默认值,不过你应该会觉得必须改掉某个参数才行,那你可以这样:
  1. var sampleDiv = new scrollingAD("divId");
  2. sampleDiv.width = 500;
  3. sampleDiv.height = 100;
  4. sampleDiv.bgColor = "red";
  5. sampleDiv.direction = "left";
  6. sampleDiv.delay = 10;
  7. sampleDiv.pauseTime = 1000;
  8. sampleDiv.size = 50;
  9. sampleDiv.isHover = false;
  10. sampleDiv.move();
复制代码

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

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

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



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

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

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



更新:
现在可以使用百分比来定义 size 参数了,像这样:
  1. var sampleDiv = new scrollingAD("sampleDiv");
  2. sampleDiv.size = "50%";// 注意,一定要加引号,否则会出错。
  3. sampleDiv.move();
复制代码

得到的效果就是一个循环只滚动两次,同理一次滚完一个循环的话,将 size 设置为 "100%" 就行了。不过不建议随意设置百分比,请尽量设置成与行数相符的数值,否则可能出现意外的空白。
当然,仍然支持数字:)

评分

参与人数 1威望 +3 收起 理由
经典论坛大妈 + 3 历史打分

查看全部评分

 楼主| 发表于 2006-7-1 00:19:00 | 显示全部楼层
如果有啥问题,你可以到我的网站留言,因为最近泡论坛比较少哈。
http://www.aeroom.org/blog/article.asp?id=48
回复 支持 反对

使用道具 举报

发表于 2006-7-1 06:08:00 | 显示全部楼层
看起来不错,呵呵
回复 支持 反对

使用道具 举报

发表于 2006-7-1 13:17:00 | 显示全部楼层
是啊,一开始就滚动了!
第一句话都看不清
回复 支持 反对

使用道具 举报

发表于 2006-7-1 18:39:00 | 显示全部楼层
感觉还是不够完善呢!
回复 支持 反对

使用道具 举报

发表于 2006-7-2 01:06:00 | 显示全部楼层
是呀,一开始就滚动是最大的问题,最好一开始不滚动,间隔10秒(可以自己定义)后再举行滚动,以方便的查看最新的新闻!!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-3 10:32:00 | 显示全部楼层
楼上几位说的那个一开始就滚动的问题,俺已经解决了哈,请测试倒数第二个框的效果演示,一开始停顿的时间就是你定义的 pauseTime。如果报错请刷新:)
回复 支持 反对

使用道具 举报

发表于 2006-7-3 10:44:00 | 显示全部楼层
若把height设为40,则有时滚动一行

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

回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-3 11:00:00 | 显示全部楼层
这大概是因为行数正好为奇数,而你设置每次滚动的行数是偶数的原因(line-height: 20px,你设置每次滚动 40px,也就是两行),在两次循环之间的某一行落单,也就只能滚动一行了——原因就是这样,似乎只要估算好行数就可以解决了:)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-3 11:13:00 | 显示全部楼层
依此类推,如果你定义每次滚动的距离为 60px,而你设定的行间距(line-height)为 20px,也就是说每次滚动3行,那总的行数必须为3的倍数才是最合适的,这样大家都应该能明白了吧:)
回复 支持 反对

使用道具 举报

发表于 2006-7-3 14:14:00 | 显示全部楼层
谢谢kaero兄,已经pm您了,请查收^_^
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-7-3 17:07:00 | 显示全部楼层
更新了一下,请看主贴最后的文字。
回复 支持 反对

使用道具 举报

发表于 2006-8-2 16:17:43 | 显示全部楼层
不错。
回复 支持 反对

使用道具 举报

发表于 2007-4-2 22:08:57 | 显示全部楼层

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

回复 支持 反对

使用道具 举报

发表于 2008-3-5 12:41:16 | 显示全部楼层
兄弟  IE7.0支持么?
回复 支持 反对

使用道具 举报

发表于 2008-5-26 11:35:02 | 显示全部楼层
好代码,用了哈.谢谢.
回复 支持 反对

使用道具 举报

发表于 2008-6-15 00:54:46 | 显示全部楼层
下不了了
应该打包一个到经典论坛来的!!!
回复 支持 反对

使用道具 举报

发表于 2008-6-15 16:48:39 | 显示全部楼层
正需要这种效果呢,楼主真强
回复 支持 反对

使用道具 举报

发表于 2008-10-5 12:42:23 | 显示全部楼层
感觉不错~先站位一下~
回复 支持 反对

使用道具 举报

发表于 2008-10-5 13:06:10 | 显示全部楼层
用了啊
回复 支持 反对

使用道具 举报

发表于 2008-10-5 13:59:24 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2008-10-5 14:35:30 | 显示全部楼层
不错的效果,谢谢
回复 支持 反对

使用道具 举报

发表于 2008-10-5 14:58:34 | 显示全部楼层
很好很强大!!!!
回复 支持 反对

使用道具 举报

发表于 2008-10-6 16:08:43 | 显示全部楼层
JS加载的真够慢 啊
回复 支持 反对

使用道具 举报

发表于 2009-5-7 12:21:12 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

发表于 2009-5-7 14:09:23 | 显示全部楼层
收藏了,谢谢楼主了。
回复 支持 反对

使用道具 举报

发表于 2009-8-1 21:44:59 | 显示全部楼层
谢谢
回复 支持 反对

使用道具 举报

发表于 2009-11-20 23:05:45 | 显示全部楼层
学习了,很黄很暴力啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-3-7 19:52 , Processed in 0.077563 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表