上干货
html: ">
Maison > interface Web > js tutoriel > jQuery实现列表自动循环滚动鼠标悬停时停止滚动_jquery

jQuery实现列表自动循环滚动鼠标悬停时停止滚动_jquery

WBOY
Libérer: 2016-05-16 17:23:13
original
1551 Les gens l'ont consulté

需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。

效果图:
jQuery实现列表自动循环滚动鼠标悬停时停止滚动_jquery jQuery实现列表自动循环滚动鼠标悬停时停止滚动_jquery
上干货
html:

复制代码 代码如下:

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能直接移动元素,就这些了。
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal