图片不间断滚动

最新推荐文章于 2021-06-04 03:17:09 发布

原创最新推荐文章于 2021-06-04 03:17:09 发布 · 676 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript

ASP_开发类专栏收录该内容

33 篇文章

订阅专栏

博客展示了一段JavaScript代码实现滚动效果的功能。通过设置滚动速度，复制内容，定义滚动函数，利用定时器控制滚动，还实现了鼠标悬停暂停、移开继续滚动的交互效果。

<DIV id=demo style="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 150px; COLOR: #0000ff; HEIGHT: 200px">
    <DIV id=demo1>
        <div align="center">
        <A href="http://www.baidu.com" target=_blank><IMG src="http://www.baidu.com/img/logo_yy.gif" border=0></A><br>
        <A href="http://www.google.com" target=_blank><IMG src="http://www.google.com/images/google_sm.gif" border=0></A><br>
        <A href="http://yisou.com" target=_blank><IMG src="http://cn.yimg.com/search/yisou/yisou_90_65.gif" border=0></A>
        </div>
    </DIV>
    <DIV id=demo2></DIV>
</DIV>
<SCRIPT language="javascript">
var speed=50;
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0){
        demo.scrollTop-=demo1.offsetHeight;
    }
    else{
        demo.scrollTop++;
    }
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)};
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</SCRIPT>

本文引用通告地址： http://blog.youkuaiyun.com/Mapleleaf123/services/trackbacks/374973.aspx