zoukankan      html  css  js  c++  java
  • marquee+js实现某个区域的“无缝滚动效果”

    一、背景:

      做项目的时候用户经常喜欢让你在首页中放一些滚动的信息,业务办理呀,通知信息呀什么的。正常用marquee就可以直接实现了,但是我们会遇到这种情况,就是如果滚动区域很大的情况下,你会发现滚动信息的末尾必须滚完才能从底下或者右边(从下往上或从右往左滚动)接着滚动,这样中间会留下很多空白区域,不太好看,如果你想把他做的完美一下,就可以结合js脚本来实现无缝滚动的效果。

    二、代码实现:

    复制代码
    <html>
    <head></head>
    <body>
    <form id="form1">
    <DIV id=demo style="OVERFLOW: hidden; WIDTH: 230px; HEIGHT: 150px">
    <DIV id=demo1>
    <table width="237" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="25">·<a href="#">公告标题</a></td>
    </tr>
    <tr>
    <td height="25">·<a href="#">公告标题</a></td>
    </tr>
    <tr>
    <td height="25">·<a href="#">公告标题</a></td>
    </tr>
    <tr>
    <td height="25">·<a href="#">公告标题</a></td>
    </tr>
    <tr>
    <td height="25">·<a href="#">公告标题</a></td>
    </tr>
    <tr>
    <td height="25">·<a href="#">公告标题</a></td>
    </tr>
    </table>
    </DIV>
    <DIV id=demo2></DIV>
    <SCRIPT type="text/javascript">
    var speed=30
    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>

    </DIV>
    </form>
    </body>
    </html>
    复制代码

    三、总结:

    如果你想做到公告条数大于给定区域显示空间的时候再执行滚动效果怎么办?

    只要判断这个table下的行数就可以了(通过js脚本实现),如果大于某个值在执行滚动效果。具体代码不再写了。。。

  • 相关阅读:
    必须克服的10种不良阅读习惯
    如何提升你的影响力
    爱情在线:拥抱变化的男女爱情!
    时间与生命
    女子最钟爱的五种男人
    社交常用表达:把人家的名字给忘了怎么办?
    最常用英语口头禅[推荐]
    中秋节的来历
    学会欣赏自己
    转帖]白领:4大行业通往高薪之路
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/2592236.html
Copyright © 2011-2022 走看看