首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:51:37
字体:
来源:转载
供稿:网友
需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示,离开后,继续滚动,具体实现如下,喜欢的朋友可以参考下

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

效果图:

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

 

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


上干货
html:

复制代码 代码如下:


<div>
<ul>
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})


主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选