zoukankan      html  css  js  c++  java
  • 新闻滚动demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.11.3.js"></script>
    <script>
    $(function(){
    var settime;
    $(".news").hover(function(){
    clearInterval(settime);
    },function(){
    settime=setInterval(function(){
    var $first=$(".news ul:first"); //获取类名下的第一个ul
    var height=$first.find("li:first").height(); //获取第一个li的高
    $first.animate({"marginTop":-height+"px"},100,function(){
    $first.css({marginTop:0}).find("li:first").appendTo($first); //设置上边距为零,为了下一次移动做准备
    });
    },1000);
    }).trigger("mouseleave"); //自动触发元素的制定事件类型
    })
    </script>
    </head>
    <body>
    <div class="news">
    <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    </ul>
    </div>
    </body>
    </html>

    注解:定时器的1000是根据li的根数来计算的

    li的个数乘以animate设置的时间值 == 定时器时间

  • 相关阅读:
    mysql函数操作(5)
    mysql函数操作(4)
    mysql函数操作(3)
    mysql函数操作(2)
    mysql函数操作
    绑定列
    iOS-Xcode解决【workspace integrity couldn't load project'】
    iOS-常用的两个弹簧动画pop
    iOS-实现后台长时间运行
    iOS-xcconfig环境变量那些事(配置环境的配置)
  • 原文地址:https://www.cnblogs.com/xiaomingge/p/5970040.html
Copyright © 2011-2022 走看看