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

      <div id="news">
            	<ul></ul>
        	  </div>
    

      

     ul,li {
            list-style: none;
        }
        
        #news{
            height: 75px;
            overflow: hidden;
            padding: 1rem;
        }
        
       #news ul {
            padding: 0;
            line-height: 1.5rem;
            text-align:center;
        }
    

      

    $(function() {
        var list = [
            "1小时前 张*锋 186****0928 报名了西点班",
            "1小时前 李*锋 186****0928 报名了西点班",
            "1小时前 宋*锋 186****0928 报名了西点班",
            "1小时前 王*锋 186****0928 报名了西点班",
            "3分钟前 赵*锋 186****0928 报名了西点班",
            "刚刚 方*锋 186****0928 报名了西点班",
            "20分钟前 袁*锋 186****0928 报名了西点班"
        ];
        for(i = 0;i<list.length;i++){
            $("#news ul").append("<li>" + list[i] + "</li>");
        }
        
    
        var $this = $("#news");
        var scrollTimer;
        $this.hover(function() {
            clearInterval(scrollTimer);
        }, function() {
            scrollTimer = setInterval(function() {
                scrollNews($this);
            }, 2000);
        }).trigger("mouseleave");
    
        function scrollNews(obj) {
            var $self = obj.find("ul");
            var lineHeight = $self.find("li:first").height(); 
            $self.animate({
                "marginTop": -lineHeight + "px"
            }, 600, function() {
                $self.css({
                    marginTop: 0
                }).find("li:first").appendTo($self);
            })
        }
    })
    

      

  • 相关阅读:
    8月6日总结
    8月4日总结
    8月3日总结
    快速幂计算题解
    7月31日总结
    7月30日总结
    关于PHP中”::”能够调用一个非静态的方法的解释
    码云 使用 svn 管理项目
    Mysql的数据类型
    thinkphp5的$this->fetch()
  • 原文地址:https://www.cnblogs.com/dfghjkl/p/10038132.html
Copyright © 2011-2022 走看看