【散分】如何用JavaScript实现跑马灯效果？

在页面上要有一个类似跑马灯的效果，当页面载入时，图片或文字从右向左走，当鼠标移到上面时，可以点击并暂停，鼠标移开时，有继续走。

解决方案 »

  1.   

    <marquee onmouseover="this.stop()" onmouseout="this.start()" width="257" height="20" style="background-color:#ccc"><a href="http://www.baidu.com">移动文字</a></marquee>
      

  2.   

    <marquee></marquee>
    这个标签我也会用，这个里边还可以设置很多的。不过我想用JavaScript去做，这只是Html里的一个标签。
    你有试过在<marquee></marquee>之间放动态的内容吗？
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <STYLE type="text/css">
    A {
    font-size:13px;
    color:#000000;
    /*无下划线的链接文字样式*/
    text-decoration:none;
    line-height:22px;
    }
    A:hover {
    font-size:13px;
    color:#FF0000;
    /*有下划线的链接文字样式*/
    text-decoration:underline;
    line-height:22px;
    }
    </STYLE></HEAD><BODY>
    <div>
    <TABLE width="252" border="0" cellspacing="0" cellpadding="0" align="center">
    <TR>
    <TD background="image/bg.gif" >
    <DIV id="dome" style="overflow:hidden;height:150px; width=245px;">
    <DIV id="dome1" >
    <A href="" target=_blank>·恭喜"ech***"双色球喜中3000元</A> <BR>
    <A href="" target=_blank>·恭喜"dhx***"双色球喜中2675元</A><BR>
    <A href="" target=_blank>·恭喜"风之***"双色球喜中1680元 </A><BR>
    <A href="" target=_blank>·恭喜"沫沫***"双色球喜中1470元</A><BR>
    <A href="" target=_blank>·恭喜"ralf***"双色球喜中1390元</A><BR>
    <A href="" target=_blank>·恭喜"f_h_***"3D喜中2000元</A><BR>
    <A href="" target=_blank>·恭喜"lsmx***"3D喜中9108.1元</A><BR>
    <A href="" target=_blank>·恭喜"梅子花***"排列3喜中8000元</A><BR>
    <A href="" target=_blank>·恭喜"洞头***"排列3喜中1000元</A><BR>
    <A href="" target=_blank>·恭喜"gxh***"排列3喜中1000元</A>
    </DIV>
    <DIV id=dome2>
    </DIV></DIV>
    </TD>
    </TR>
    </TABLE>
    </div>
    <SCRIPT language="JavaScript">
    var speed=50; //设置文字滚动速度
    dome2.innerHTML=dome1.innerHTML //复制dome1为dome2
    function Marquee(){
    if(dome2.offsetTop-dome.scrollTop<=0) //当滚动至dome1与dome2交界时
    dome.scrollTop-=dome1.offsetHeight //dome跳到最顶端
    else{
    dome.scrollTop++
    }
    }
    var MyMar=setInterval(Marquee,speed) //设置定时器
    dome.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
    dome.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器，继续滚动
    </SCRIPT></BODY>
    </HTML>