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 相关文章推荐
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
原生js无缝轮播插件使用详解
Mar 09 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提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
python脚本替换指定行实现步骤
2017/07/11 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python反编译学习之字节码详解
2019/05/19 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
我们的节日清明节活动总结
2014/04/30 职场文书
销售岗位职责范本
2014/06/12 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
大学生入党自传2015
2015/06/26 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
python flask框架快速入门
2021/05/14 Python
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
python必学知识之文件操作(建议收藏)
2021/05/30 Python