|
|
在这里共享下连续滚动代码，兼容多浏览器，但愿能够帮助制作模版的朋友，废话少说，直接如题看下面：
参数说明:
demo 字幕区域标签(div)的ID;
demo1/demo2 显示内容标签(div或td)的ID demo1为原始内容,demo2是它的拷贝;
direction 字幕方向(up,down,left,right) ;
delay 字幕播放的延迟时间(毫秒);
step 字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑)
JS文件如下：
[ol] 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里截过来的 呵呵)
[ol] function Ruby (){}if (!Array.prototype.push) { Array.prototype.push = function() { var startLength = this.length; for (var i = 0; i 复制代码
到这里,js文件已经搞定了,开始写HTML代码:
(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)
[ol] .wrap{word-break:break-all;overflow:hidden}[/ol]复制代码
(2)添加js文件 -->用了prototype.js的更好,替换掉Ruby.js
[ol][/ol]复制代码(3)添加字幕区域内容
1. 向上或向下滚动
[ol] =顶部=
科瑞网酷主机：高配置、低价位，欢迎选购
=底部= [/ol]复制代码
由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行 了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动
2. 向左或向右滚动
[ol] [开 始]科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购，科瑞网酷主机：高配置、低价位，欢迎选购[结束] [/ol]复制代码
实现原理同上,至于为什么这里要用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"); |
|
发表于 2010-9-5 17:35:42
