模版里添加连续滚动代码技巧，兼容多浏览器
在这里共享下连续滚动代码，兼容多浏览器，但愿能够帮助制作模版的朋友，废话少说，直接如题看下面：参数说明:
demo字幕区域标签(div)的ID;
demo1/demo2显示内容标签(div或td)的ID demo1为原始内容,demo2是它的拷贝;
direction 字幕方向(up,down,left,right) ;
delay 字幕播放的延迟时间(毫秒);
step 字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑)
JS文件如下：
[*]
[*]function Marquee (demo, demo1, demo2, direction, delay, step)
[*]{
[*] direction = direction.toLowerCase();
[*] if(((direction == "up" || direction == "down") && ($(demo1).offsetHeight > $(demo).offsetHeight)) || ((direction == "left" || direction == "right") && ($(demo1).offsetWidth > $(demo).offsetWidth)))
[*] {
[*]$(demo2).innerHTML = $(demo1).innerHTML;
[*]if(direction == "down")
[*] $(demo).scrollTop = 2 * $(demo1).offsetHeight - $(demo).offsetHeight;
[*]if(direction == "right")
[*] $(demo).scrollLeft = 2 * $(demo1).offsetWidth - $(demo).offsetWidth;
[*] }
[*] else
[*]return;
[*]
[*] var flag = true;
[*] var speed = delay == null? 1 : parseInt(delay);
[*] var amount = step == null? 1 : parseInt(step);
[*] var Marquee = function ()
[*] {
[*]switch(direction)
[*]{
[*] case "up":
[*] if($(demo2).offsetTop - $(demo).scrollTop = 0)
[*] $(demo).scrollTop += $(demo2).offsetHeight;
[*] else
[*] $(demo).scrollTop -= amount;
[*] break;
[*] case "left":
[*] if($(demo2).offsetWidth - $(demo).scrollLeft 复制代码
上面js里用到的$或$F,如果你用过prototype.js的话,把它添加进去就行了; 否则你需要先引用下面的js文件: Ruby.js(从prototype.js里截过来的 呵呵)
[*]
[*]function Ruby ()
[*]{
[*]}
[*]if (!Array.prototype.push) {
[*]Array.prototype.push = function() {
[*] var startLength = this.length;
[*] for (var i = 0; i 复制代码
到这里,js文件已经搞定了,开始写HTML代码:
(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)
[*]
[*]
[*].wrap{word-break:break-all;overflow:hidden}
[*]
[*]复制代码
(2)添加js文件-->用了prototype.js的更好,替换掉Ruby.js
http://bbs.destoon.com/static/image/smiley/default/smile.gif
[*]
[*]
[*]
[*]
[*]
[*]复制代码(3)添加字幕区域内容
1. 向上或向下滚动
[*]
[*]
[*]
[*]
[*] =顶部=
科瑞网酷主机：高配置、低价位，欢迎选购
=底部=
[*]
[*]
[*]
[*]复制代码
由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行 了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动
2. 向左或向右滚动
[*]
[*]
[*]
[*]
[*]
[*]
[*] [开 始]科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购[结束]
[*]
[*]
[*]
[*]
[*]
[*]
[*]
[*] 复制代码
实现原理同上,至于为什么这里要用table而不用div,是因为div在默认情况只能判断height,而不能判断width,而table却恰恰相反,上面用到的nobr标签也是必需的,防止字幕自动换行!
附:更改延迟播放速度 obj2.delay(50); 或 obj2.delay("50");
更改播放步长 obj2.step(50); 或 obj2.step("50");
停止播放 obj2.stop(); 继续播放 obj2.start();
更改播放方向(同类型方向) obj2.direction("right");
楼主辛苦了 发个演示看看。。。。。。。。。
好多看不懂的啊，我太烂了，呵呵
强，要好好学习了
http://bbs.destoon.com/static/image/smiley/default/victory.gif
就是不知道怎么安装，高手说详细点呀？
页:
[1]