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


Posted in Javascript onSeptember 06, 2013

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

效果图:
jQuery实现列表自动循环滚动鼠标悬停时停止滚动 jQuery实现列表自动循环滚动鼠标悬停时停止滚动
上干货
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能直接移动元素,就这些了。
Javascript 相关文章推荐
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
jquery实现metro效果示例代码
Sep 06 #Javascript
JS去除数组重复值的五种不同方法
Sep 06 #Javascript
JavaScript判断密码强度(自写代码)
Sep 06 #Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 #Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 #Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 #Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 #Javascript
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
JavaScript面向对象精要(上部)
2017/09/12 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python 格式化输出百分号的方法
2019/01/20 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
采购部主管岗位职责
2014/01/01 职场文书
顶岗实习接收函
2014/01/09 职场文书
社会实践活动总结报告
2014/04/29 职场文书
文明寝室申报材料
2014/05/12 职场文书
汽车转让协议书范本
2014/12/07 职场文书
大学学生会辞职信
2015/05/13 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
国王的演讲观后感
2015/06/03 职场文书
毕业证明模板
2015/06/19 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
Python读写yaml文件
2022/03/20 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫