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 相关文章推荐
javascript 闭包
Sep 15 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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抓即时股票信息
2006/10/09 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Python中的is和id用法分析
2015/01/26 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python简单文本处理的方法
2015/07/10 Python
Django日志模块logging的配置详解
2017/02/14 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
公司董事长助理工作职责
2014/07/12 职场文书
解除劳动合同协议书
2014/09/17 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
语文教师求职信范文
2015/03/20 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python