zoukankan      html  css  js  c++  java
  • JS无缝滚动

    JS部分:

    $(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部分:

    <style type="text/css"> 
    .renav{ 
    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> 
    

     本文转自:http://www.jb51.net/article/35149.htm

  • 相关阅读:
    使用 Sentry集中处理错误
    laravel实现多对多的分析
    windows下phpstorm的快捷键
    npm 升级
    squid----正向代理
    nginx----配置优化
    负载均衡----nginx
    负载均衡----HAproxy
    负载均衡----LVS
    mysql-8.0.12读写分离
  • 原文地址:https://www.cnblogs.com/dacheng/p/2990149.html
Copyright © 2011-2022 走看看