全部频道

首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置：首页正文

jQuery实现列表自动滚动循环滚动展示新闻_jquery

2020-11-27 来源：华拓网
需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。

效果图：

上干货

html：
代码如下:


  • aaaaaaaaaaaaaaa

  • bbbbbbbbbbbbbbb

  • ccccccccccccccc

  • ddddddddddddddd

  • eeeeeeeeeeeeeee

  • fffffffffffffff

  • ggggggggggggggg




    • css：
    代码如下:
    ui,li {
    list-style: none;
    }
    #news{
    height: 75px;
    overflow: hidden;
    }

    关键是js文件：
    代码如下:
    $(function() {
    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);
    })
    }
    })

    主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性（marginLeft、top、left等等）的理解和运用，需要注意的是，如果不加.trigger("mouseleave")，在网页初始化的时候列表不会滚动，还有appendTo能直接移动元素，就这些了。

    显示全文