Marquee.js 参数说明: demo 字幕区域标签(div)的ID; demo1/demo2 显示内容标签(div或td)的ID demo1为原始内容,demo2是它的拷贝; direction 字幕方向(up,down,left,right) ; delay 字幕播放的延迟时间(毫秒); step 字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑) 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 -= $(demo1).offsetHeight; else $(demo).scrollTop += amount; break; case "down": if($(demo1).offsetTop - $(demo).scrollTop >= 0) $(demo).scrollTop += $(demo2).offsetHeight; else $(demo).scrollTop -= amount; break; case "left": if($(demo2).offsetWidth - $(demo).scrollLeft <= 0) $(demo).scrollLeft -= $(demo1).offsetWidth; else $(demo).scrollLeft += amount; break; case "right": if($(demo).scrollLeft <= 0) $(demo).scrollLeft += $(demo2).offsetWidth; else $(demo).scrollLeft -= amount; break; default:break; } } var timer = setInterval(Marquee,speed); var play = function () { if(flag) { clearInterval(timer); timer = setInterval(Marquee, speed); } } $(demo).onmouseover = function () { if(flag) clearInterval(timer); } $(demo).onmouseout = function () { if(flag) timer = setInterval(Marquee, speed); } this.delay = function (s) { speed = s == null? 50 : parseInt(s); play(); } this.step = function (s) { amount = s == null? 1 : parseInt(s); play(); } this.start = function () { if(!flag) { flag = true; play(); } } this.stop = function () { if(flag) { flag = false; clearInterval(timer); } } this.direction = function (s) { s = s.toLowerCase(); if( s == direction ) return; if(s == "down" && direction == "up" ) direction = s; if(s == "up" && direction == "down") direction = s; if(s == "right" && direction == "left") direction = s; if(s == "left" && direction == "right") direction = s; if (s == direction) play(); } } 上面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 < arguments.length; i++) this[startLength + i] = arguments[i]; return this.length; } } $ = function () { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == ''string'') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } $F = function () { if(arguments.length == 1) return document.getElementById(arguments[0]).value; else { var elements = new Array(); for(var i = 0;i< arguments.length; i++) { elements.push(document.getElementById(arguments[i]).value); } return elements; } } 到这里,js文件已经搞定了,开始写HTML代码: (1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候) <style> .wrap{word-break:break-all;overflow:hidden} </style> (2)添加js文件 -->用了prototype.js的更好,替换掉Ruby.js :) <script src="Ruby.js"></script> <script src="Marquee.js"></script> (3)添加字幕区域内容 1. 向上或向下滚动 <div id="d1" style="overflow:hidden;height:200px;width:90px"> <div id="d11" width="100%" class="wrap"> =顶部=<br>动感地带资费攻略1 动感地带资费攻略2<br>=底部= </div> <div id="d12" width="100%" class="wrap"></div> </div> <script>var obj1 = new Marquee("d1","d11","d12","up");</script> 由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动 2. 向左或向右滚动 <div id="d2" style="overflow:hidden;width:500"> <table> <tr> <td id="d21"> <nobr> [开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束]　 </nobr> </td> <td id="d22"></td> </tr> </table> </div> <script>var obj2 = new Marquee("d2","d21","d22","left");</script> 实现原理同上,至于为什么这里要用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");

　　推荐阅读

　　比较平滑的js控制textaera的高度

佐佐制造 --textarea---addheight /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.4em Helvetica, Arial, sans-serif; } >>>详细阅读

本文标题：兼容多浏览器的字幕特效Marquee的通用js类

地址：http://www.17bianji.com/kaifa2/JS/29524.html

 1/2    1