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

  • 相关阅读:
    深入理解JVM内幕:从基本结构到Java 7新特性
    通过Java反射做实体查询
    Hadoop教程(一)
    很不错的js特效
    java utf8字符 导出csv 文件的乱码问题。
    spring MVC使用Interceptor做用户登录判断
    Bootstrap--全局css样式之图片
    Bootstrap-全局css样式之按钮
    Bootstrap--全局css样式之表单
    Bootstarp--全局CSS样式之表格
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/2592236.html
Copyright © 2011-2022 走看看