JS实现间断式滚动文字

由于W3C标准的限制，导致很多原来使用marquee标记实现滚动/带停顿（间隔式）滚动文字的方法都没有办法在FIREFOX中使用，为了解决这个办法，网络上很多人提出自己的想法和做法，还有人再责备W3C把marquee标记给抛弃了，呵呵，这些都不管了，网络上有很全的代码，直接COPY就能用的，但是使用的时候还是会因为客观情况的不同而出现各种各样的问题。
------------------
我抄袭了一段代码，在此，也谢谢这位网友，针对我的客观情况，我将DIV的ID作为参数传递的方法修改了，只对一个DIV操作，其实如果非特殊情况，建议不要修改原来的方法，因为修改了之后，每次添加一个滚动字母，都要全新COPY代码，并修改DIV的ID，我是逼不得已的。
代码如下：

<br /><h3>建立图层</h3><br /><div id="sampleDiv" style="font-size: 12px; line-height: 20px;"><br />当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。<br /></div><br /><h3>然后调用脚本文件</h3><br /><script type="text/javascript"><br />function scrollingAD(_id, _width, _height, _bgColor, _direction, _delay, _pauseTime, _size, _isHover) {<br /> this.id = _id;<br /> this.width = _width;<br /> this.height = _height;<br /> this.bgColor = _bgColor;<br /> this.direction = _direction;<br /> this.delay = _delay;<br /> this.pauseTime = _pauseTime;<br /> this.size = _size;<br /> this.object = null;<br /> this.isMove = true;<br /> <br /> if((this.id == "") || (this.id == null)) {<br /> alert("必须输入对象的 ID 才能创建滚动区域！");<br /> this.isMove = false;<br /> return false;<br /> }<br /> <br /> if(document.getElementById(this.id)) {<br /> this.object = document.getElementById(this.id);<br /> } else {<br /> window.alert("滚动区域创建失败！\n请确认 " + this.id + " 是否拼写错误。");<br /> this.isMove = false;<br /> return false;<br /> }<br />}<br /><br />scrollingAD.prototype.checkNumber = function(_attribute, defaultValue) { <br /> if(isNaN(_attribute)) {<br /> return defaultValue;<br /> } else {<br /> return ((typeof(parseInt(_attribute)) == "number") ? parseInt(_attribute) : defaultValue);<br /> }<br />}<br /><br />scrollingAD.prototype.move = function() {<br /> if(this.isMove == false) return false;<br /> <br /> var defaultWidth = 200;<br /> var defaultHeight = 50;<br /> var defaultDelay = 20;<br /> var defaultPauseTime = 2000;<br /> var defaultIsHover = true;<br /> var defaultBgColor = "transparent";<br /> var defaultDirection = "up";<br /> <br /> this.width = this.checkNumber(this.width, defaultWidth);<br /> this.height = this.checkNumber(this.height, defaultHeight);<br /> this.delay = this.checkNumber(this.delay, defaultDelay);<br /> this.pauseTime = this.checkNumber(this.pauseTime, defaultPauseTime);<br /> this.isHover = (typeof(this.isHover) == "boolean") ? this.isHover : defaultIsHover;<br /> <br /> if(this.direction == "left") {<br /> this.size = this.checkNumber(this.size, this.width);<br /> } else {<br /> this.size = this.checkNumber(this.size, this.height);<br /> }<br /> <br /> if((this.bgColor == null) || (typeof(this.bgColor) == undefined)) {<br /> this.bgColor = defaultBgColor;<br /> } else {<br /> this.bgColor = this.bgColor;<br /> }<br /> <br /> if((this.direction == null) || (typeof(this.direction) == undefined)) {<br /> this.direction = defaultDirection; <br /> } else {<br /> this.direction = (this.direction.search(/(^up$)|(^left$)/gi) != -1) ? this.direction.toLowerCase() : defaultDirection;<br /> }<br /> <br /> // 创建滚动区域；<br /> with(this.object) {<br /> style.display = "block";<br /> style.width = this.width + "px";<br /> style.height = this.height + "px";<br /> style.overflow = "hidden";<br /> style.backgroundColor = this.bgColor;<br /> }<br /> <br /> if(this.direction == "up") {<br /> this.object.innerHTML = "<div id="\">" + this.object.innerHTML + "</div>" + "<div>" + this.object.innerHTML + "</div><input type="\" value="\" id="\">";<br /> } else {<br /> this.object.innerHTML = "<span id="\">" + this.object.innerHTML + "</span>" + "<span>" + this.object.innerHTML + "</span><input type="\" value="\" id="\">";<br /> }<br /> <br /> if(document.getElementById(this.id)) {<br /> var evalString;<br /> if(this.direction == "up") {<br /> evalString = "scrollToUp(\"" + this.id + "\", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";<br /> } else {<br /> evalString = "scrollToLeft(\"" + this.id + "\", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) ";<br /> }<br /> eval(evalString);<br /> <br /> } else {<br /> return false;<br /> }<br /> <br /> function pixelToNum(_string) {<br /> //该函数用于去掉数值后面的px，并将之转化为数字。<br /> if(_string.slice(_string.length - 2) == "px") {<br /> return parseInt(_string.slice(0, (_string.length - 2)));<br /> } else {<br /> return _string;<br /> }<br /> }<br /> <br /> function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) {<br /> var obj = document.getElementById(_id);<br /> var mirror = document.getElementById(_id + "_mirror"); <br /> <br /> if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) {<br /> var evalString =_id + "_timer = window.setTimeout(function() {scrollToLeft(\"" + _id + "\", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";<br /> <br /> if(_isHover) {<br /> mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;}<br /> mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;}<br /> var step = parseInt(document.getElementById(_id + "_isHover").value);<br /> mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - step) + "px"; <br /> eval("var " + evalString);<br /> } else { <br /> mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - 1) + "px"; <br /> eval("var " + evalString);<br /> }<br /> } else {<br /> if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) {<br /> _s += 1;<br /> window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);<br /> } else {<br /> mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + "px";;<br /> window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);<br /> }<br /> }<br /> <br /> }<br /><br /> function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) {<br /> var obj = document.getElementById(_id);<br /> var mirror = document.getElementById(_id + "_mirror"); <br /> <br /> if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) {<br /> var evalString =_id + "_timer = window.setTimeout(function() {scrollToUp(\"" + _id + "\", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")";<br /> <br /> if(_isHover) {<br /> mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;}<br /> mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;}<br /> var step = parseInt(document.getElementById(_id + "_isHover").value);<br /> mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - step) + "px"; <br /> eval("var " + evalString);<br /> } else { <br /> mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - 1) + "px"; <br /> eval("var " + evalString);<br /> }<br /> } else {<br /> if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) {<br /> _s += 1;<br /> window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime);<br /> } else {<br /> mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + "px";;<br /> window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime);<br /> }<br /> }<br /> }<br />}<br /></script><br /><h3>最后建立滚动区域</h3><br /><script type="text/javascript"><br />// <![CDATA[ var sampleDiv = new scrollingAD("sampleDiv"); sampleDiv.width = 200; sampleDiv.height = 20; sampleDiv.bgColor = "yellow"; sampleDiv.move(); // ]]><br /></script><br /><p>如果脚本报错，可能是因为我的网站速度连接太慢的原因，只要刷新一下页面就行了。</p><br />

瞧，textarea里头无故多出来的换行标记，blogspot会自动增加换行标记，由于是代码，所以又要在textarea中显示，所以只能这样了，当然是可以关闭的，但是有一种是关不掉的，就是我之前的posts就都会乱了，只能这样了，可以复制下来，把换行标记替换为空；另外，blogspot还有一个缺点，就是在为blog添加自定义代码时，也会作检查和补充，凡是HTML标记或者JS的，这就是我上面说的我的特殊情况，希望blogspot早日解决此问题。