• 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脚本实现),如果大于某个值在执行滚动效果。具体代码不再写了。。。

      

  • 相关阅读:
    Improve Your Study Habits
    js中的cookie的读写操作
    js中数组/字符串常用属性方法归纳
    前端的一些常用DOM和事件归纳
    关于scroll无法绑定的问题
    页面内锚点定位及跳转方法总结
    js共享onload事件
    JS获取终端屏幕、浏览窗口的相关信息
    jsonp跨域问题记录
    关于if/else if
  • 原文地址:https://www.cnblogs.com/lihaibo/p/2205573.html
Copyright © 2020-2023  润新知