zoukankan      html  css  js  c++  java
  • jquery无缝间歇向上滚动

    jquery无缝间歇向上滚动

    JS部份

    View Code
    $(function(){
        var $this = $(".renav");
        var scrollTimer;
        $this.hover(function(){
              clearInterval(scrollTimer);
         },function(){
           scrollTimer = setInterval(function(){
                         scrollNews( $this );
                    }, 2000 );
        }).trigger("mouseout");
    });
    function scrollNews(obj){
       var $self = obj.find("ul:first");
       var lineHeight = $self.find("li:first").height();  
       $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
             $self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
       })
    }

    HTML部份

    View Code
    <style type="text/css">
    .renav
    {
        width
    :200px;
        height
    :150px;
        line-height
    :21px;
        overflow
    :hidden;
        background
    :#FFFFFF;
    }
    .renav li
    {
        height
    :21px;
    }
    </style>
    <div class="renav">
        <ul style="margin-top: 0px;">
            <li><a>罗氏</a></li>
            <li><a>瑞声达</a></li>
            <li><a>未添加1</a></li>
            <li><a>未添加2</a></li>
            <li><a>未添加3</a></li>
            <li><a>未添加4</a></li>
            <li><a>西门子</a></li>
            <li><a>欧姆龙</a></li>
        </ul>
    </div>
  • 相关阅读:
    [HNOI2014]江南乐
    烦人的数学作业(数位dp)
    http2.0请求springboot接口
    01背包动态规划
    坑点总结
    [机房测试] 堆石子
    [机房测试] 出租车
    [机房测试] 下棋
    [机房测试] number
    [CSP-S2019] 树的重心
  • 原文地址:https://www.cnblogs.com/chendaoyin/p/2978641.html
Copyright © 2011-2022 走看看