2023年7月9日发(作者：)
jQuery实现列表⾃动滚动循环滚动展⽰新闻需要在页⾯中⼀个⼩的区域循环滚动展⽰新闻（公告、活动、图⽚等等），并且，⿏标悬停时停⽌滚动并提⽰，离开后，继续滚动。效果图：上⼲货html：复制代码 代码如下:
css：复制代码 代码如下:ui,li {list-style: none;}#news{height: 75px;overflow: hidden;}关键是js⽂件：复制代码 代码如下:$(function() {var $this = $("#news");var scrollTimer;$(function() {clearInterval(scrollTimer);}, function() {scrollTimer = setInterval(function() {scrollNews($this);}, 2000);}).trigger("mouseleave");function scrollNews(obj) {var $self = ("ul");var lineHeight = $("li:first").height();
$e({"marginTop": -lineHeight + "px"}, 600, function() {$({marginTop: 0}).find("li:first").appendTo($self);})}})主要就是对hover、setInterval、clearInterval、animate这些⽅法以及marginTop属性（marginLeft、top、left等等）的理解和运⽤，需要注意的是，如果不加.trigger("mouseleave")，在⽹页初始化的时候列表不会滚动，还有appendTo能直接移动元素，就这些了。
发布者：admin，转转请注明出处：http://www.yc00.com/web/1688850996a176566.html
评论列表（0条）