zoukankan      html  css  js  c++  java
  • jquery无缝向上滚动实现代

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .renav{
    200px;
    height:150px;
    overflow:hidden;
    }
    .renav li{
    height:21px;
    border-bottom:solid 1px blue;
    list-style-type:none;
    }
    </style>
    <body>
    <div class="renav">
    <ul>
    <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>
            <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(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);
    })
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    学习视频收集
    vscode 编译器插件
    vue2.0父子组件之间传值
    js 案例
    插件
    【转】30分钟掌握 C#6
    【初码干货】关于.NET玩爬虫这些事
    上机作业七 系统进程与计划任务管理
    客户端与服务器双向密钥对验证
    DHCP中继配置
  • 原文地址:https://www.cnblogs.com/meiqiyuanzi/p/6925240.html
Copyright © 2011-2022 走看看