不间断跑马灯,MarqueeMove

2011-01-13 16:22  1876人阅读  评论 (0)

今天弄跑马灯,感觉不连续去网上找了js,但是不能同时多个使用,需要手动改代码。然后自己手动写了这个MarqueeMove的js对象。原文地址: http://www.dotcoo.com/post-68.html

Javascript:

var MarqueeMove = function(fx, sj, s, c1, c2){
    this.fx = fx;
    this.sj = sj;
    this.s = s;
    this.c1 = c1;
    this.c2 = c2;
    var move = function(){
        if(fx == 'left'){
            if(c2.offsetLeft-s.scrollLeft<=0){
                s.scrollLeft -= c1.offsetWidth;
            }else{
                s.scrollLeft+=2; //步长
            }
        }else{
            if(c2.offsetTop-s.scrollTop<=0){
                s.scrollTop -= c1.offsetHeight;
            }else{
                s.scrollTop+=2; //步长
            }
        }
    };
    c2.innerHTML=c1.innerHTML;
    s.intervalid = setInterval(move, sj);
    s.onmouseover=function() {clearInterval(s.intervalid);};
    s.onmouseout=function() {s.intervalid = setInterval(move, sj);};
};HTML:

<div id="ms" style="width: 540px; overflow: hidden;">
    <table>
        <tbody>
            <tr>
                <td id="mc1"><table style="width: 960px;">
                        <tbody>
                            <tr>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                                <td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td id="mc2"> </td>
            </tr>
        </tbody>
    </table>
</div>使用方法

var mqm = new MarqueeMove('left', 30, ms, mc1, mc2); // 创建对象,自动开始滚动

//mqm.s.onmouseout(); //js控制停止

//mqm.s.onmouseout(); //js控制开始
豫ICP备09035262号-1