zoukankan      html  css  js  c++  java
  • 文字,广告,消息向上滚动

    原理:

      1: 用到定时器setInterval(),动画animate()方法,改变margin-top: 的值;

      2: 用定位时,改变top: 的值; (效果比较差,不顺畅);

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <div id="broadcast" class="bar" name="giftactive">
     <div style="float:left"><strong>间隔滚动效果:</strong></div>
     <div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
         <ul class="mingdan" id="holder">
              <li><a href="#" target="_blank">aaaaaa</a></li>
              <li><a href="#" target="_blank">bbbbbb</a></li>
              <li><a href="#" target="_blank">cccccc</a></li>
              <li><a href="#" target="_blank">dddddd</a></li>
              <li><a href="#" target="_blank">eeeeee</a></li>
         </ul>
     </div>
    </div>
    <script type="text/javascript">
        function AutoScroll(obj) {
             $(obj).find("ul:first").animate({
                 marginTop: "-22px"
            }, 500, function() {
                 $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
            });
        }
        $(document).ready(function() {
            setInterval('AutoScroll("#demo")', 1000)
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    yum安装8.0mysql数据库
    free命令详细介绍
    linux 自定义美女欢迎界面
    shll脚本常用格式和规则使用
    liunx常用知识基本命令大全
    liunx系统二进制包安装编译mysql数据库
    CentOS7更改网卡名称
    老男孩教育100道面试题
    非关系型数据库(NoSQL)
    iptables
  • 原文地址:https://www.cnblogs.com/wangyihong/p/6971385.html
Copyright © 2011-2022 走看看