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

  • 相关阅读:
    linux | 管道符、输出重定向
    php 升级php5.5 、php7
    mysql 启动失败
    centos7.2安装phpmyadmin
    php file_get_contents失败[function.file-get-contents]: failed to open stream: HTTP request failed!解决
    go println与printf区别
    前端 head 中mate 详解
    centos 7 安装mysql
    iOS数据持久化—数据库SQLite模糊查询
    C 语言字符串和格式化输入与输出
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/2592236.html
Copyright © 2011-2022 走看看