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

绝对像样001

绝对像样001

2016-02-19 11:27

下面是个超简单的非常不错的不间断循环滚动类 兼容多浏览器教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~
调用的方法:
首先你得把脚本链接到你的页面,或者直接调用下面这个链接也行。当然,最好还是下载到你自己的机器上。
代码如下:
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 全选 注:如需引入外部Js需刷新才能执行]    提示:您可以先修改部分代码再运行
更新:
现在可以使用百分比来定义 size 参数了,像这样:
var sampleDiv = new scrollingAD("sampleDiv");
sampleDiv.size = "50%";// 注意,一定要加引号,否则会出错。
sampleDiv.move();
得到的效果就是一个循环只滚动两次,同理一次滚完一个循环的话,将 size 设置为 "100%" 就行了。不过不建议随意设置百分比,请尽量设置成与行数相符的数值,否则可能出现意外的空白。
当然,仍然支持数字:)
展开更多 50%)
分享

猜你喜欢

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

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

Javascript Chinaz的不间断滚动新闻函数

Web开发
Javascript Chinaz的不间断滚动新闻函数

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

Web开发
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

浏览器CSS兼容方案

Web开发
浏览器CSS兼容方案

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

搜狗浏览器兼容模式怎么设置 搜狗浏览器兼容模式设置方法

软件教程
搜狗浏览器兼容模式怎么设置  搜狗浏览器兼容模式设置方法

各种浏览器兼容问题

Web开发
各种浏览器兼容问题

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

IOS开发教程之put上传文件的服务器的配置及实例分享

IOS开发教程之put上传文件的服务器的配置及实例分享

android PopupWindow 和 Activity弹出窗口实现方式

android PopupWindow 和 Activity弹出窗口实现方式
下拉加载更多内容 ↓