实现连续字幕滚动解决方案 _JavaScript

实现连续字幕滚动

我调试了下它提示

Microsoft JScript 运行时错误: 缺少对象
没有可用于当前位置的源代码这是什么原因

<head runat="server">
<title>无标题页</title>

//实现复制内容填充页面初始化字幕暂停和滚动的js代码

<script language="javascript" type="text/javascript">
function newsScroll()
{
if(scrollimg.parentNode.scrollLeft!=(scrollimg.clientWidth/2))
scrollimg.parentNode.scrollLeft++;

else
scrollimg.parentNode.scrollLeft=0;

}

var tm=null
function window.onload(){
simg1.innerHTML=simg.innerHTML

tm=setInterval('newScroll()',20)

}

function stop(){
clearInterval(tm)
}

function start()
{
tm=setInterval('newScroll()',20)

}

</script>
</head>
<body background="aa.jpg">

//一个表格稍微嵌套了下有可能有些错误请改改

<form id="form1" runat="server">
<table width="543" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="bottom">
<div style="width:543px; height:21; overflow:hidden" onmouseOver="stop()" onmouseOut="start()">
<table width="543" border="0" cellpadding="0" cellspacing="0" id="scrollimg" >
<tr>
<td id="simg">
<table width="543" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td nowrap="nowrap">
<font color="#FF6C02">*</font><a href="#">1.巧学巧用dfsdgdsgdfgfgdfdsfgdsgdf</a>
<font color="#FF6C02">*</font><a href="#">2.巧学巧用dfgfdsgsdfgdsfgdsfgdsf</a>
<font color="#FF6C02">*</font><a href="#">3.巧学巧用dfgdsdsfgdsgd</a>
</td>
</tr>
</table>
</td>
<td id="simg1"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>

</body>
</html>

------解决方案--------------------

HTML code


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
            * {margin:0; padding:0;}
            body {
                font-family:arial;
                font-size:12px;
            }
            ul {list-style:none;}
            .a {
                margin:100px; padding:0 5px;
                width:100px; height:22px; line-height:22px;
                border:1px solid red;
                overflow:hidden;
            }
        </style>        
    </head>
    <body>
        <ul id="a" class="a">
            <li>&yen; 1-1</li>
            <li>&yen; 1-2</li>
            <li>&yen; 1-3</li>
            <li>&yen; 1-4</li>
        </ul>
        <script>
            function $(el){
                return typeof el == 'string' ? document.getElementById(el) : el;
            }
            
            /*
            alert( $('a').scrollTop )
            $('a').scrollLeft = 1123
            alert( $('a').scrollHeight )
            */
            
            ;(function(doc){
                var Class = {
                    create: function(){
                        return function(){
                            this.init.apply(this, arguments);
                        }
                    }
                };
                Function.prototype.bind = function(obj){
                    var method = this;
                    return function(){
                        method.apply(obj, arguments);
                    }
                }
                var Scroll = Class.create();
                Scroll.prototype = {
                    /*
                        el: 滚动的元素 id
                        height: 每次滚动的高度
                        delay: 每次滚动间隔 毫秒
                    */
                    init: function(el, height, delay){
                        this.el = typeof el == 'string' ? doc.getElementById(el) : el;
                        if(!this.el) return;
                        this.el.innerHTML += this.el.innerHTML;
                        this.height = height || 10;
                        this.delay = delay || 0;
                        this.el.scrollHeight; // ie6/7 获取不鸟scrollHeight，这里运行一下
                        this.maxHeight= this.el.scrollHeight / 2;
                        this.counter = 0;
                        this.timer = null;
                        setTimeout(this.scroll.bind(this), this.delay);
                        this.el.onmouseover = this.stop.bind(this);
                        this.el.onmouseout = function(){
                            this.timer = setTimeout(this.scroll.bind(this), this.delay);
                        }.bind(this);
                    },
                    scroll: function(){
                        if( this.el.scrollTop < this.maxHeight ){
                            this.el.scrollTop++;
                            this.counter++;
                        }else{
                            this.el.scrollTop = 0;
                            this.counter = 0;
                        }
                        if( this.counter < this.height ){
                            this.timer = setTimeout(this.scroll.bind(this), 20);
                        }else{
                            this.counter = 0;
                            this.timer = setTimeout(this.scroll.bind(this), this.delay);
                        }
                    },
                    stop:function(){
                        clearTimeout(this.timer);
                    }
                }
                window.autoScroll = Scroll;
            })(document);
            
            new autoScroll('a', 22, 800);
            
            
            
            
        </script>
    </body>
</html>