新闻无缝滚动

  <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);
        })
    }
})

  

posted @ 2018-11-29 14:31  一人的代码  阅读(442)  评论(0编辑  收藏  举报