jQuery实现列表自动循环滚动鼠标悬停时停止滚动
来源:互联网 发布:怎么看淘宝旗舰店执照 编辑:程序博客网 时间:2024/05/18 03:19
需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示,离开后,继续滚动,具体实现如下,喜欢的朋友可以参考下
需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。
效果图:
上干货
html:
复制代码代码如下:
<div id="news">
<ul>
<li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>
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能直接移动元素,就这些了。
原文:http://www.jb51.net/article/41188.htm
0 0
- jQuery实现列表自动循环滚动鼠标悬停时停止滚动
- 文字向上滚动,鼠标悬停停止滚动
- html代码实现自动滚动,鼠标滑过时停止滚动
- html代码实现自动滚动,鼠标滑过时停止滚动
- 使用jquery实现文字滚动,鼠标悬停效果
- jq文字无缝滚动代码(鼠标悬停停止滚动)
- js 自动滚动,鼠标移动停止滚动
- jquery鼠标悬停图片上下滚动切换
- DIV滚动 鼠标悬停效果
- UIScrollView自动滚动 循环滚动视图实现
- UIScrollView实现循环滚动和自动滚动
- jQuery实现列表无缝滚动
- 鼠标进入时停止滚动,移出继续滚动
- 列表的鼠标按下滚动抬起停止效果
- jQuery的滚动悬停效果
- jquery特效:无缝向上循环滚动列表
- jquery 文本上下无缝滚动,鼠标放上去就停止
- [前端] 文字垂直滚动+鼠标悬停效果
- 译作:《50 Android Hacks》中文版:《打造高质量Android应用:Android开发必知的50个诀窍》
- Handler sendMessage 与 obtainMessage (sendToTarget)比较
- You cannot combine custom titles with other title features
- 快排
- Winform捕获全局异常
- jQuery实现列表自动循环滚动鼠标悬停时停止滚动
- 对随机梯度下降的一些使用心得
- 【PyQt4实例7】QPainter坐标系的变换【转载】
- jq 使用手册
- 卓有成效的敏捷开发流程
- 高级语法-省略
- win7系统下64位Qt的编译
- D3D投影变换
- 极限编程