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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
js 居中漂浮广告
2010/03/21 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
儿童编程python入门
2018/05/08 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Python中six模块基础用法
2019/12/08 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
六年级学生评语
2014/04/22 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
小学信息技术教学反思
2016/02/16 职场文书