jQuery实现列表自动滚动循环滚动展示新闻


Posted in Javascript onAugust 22, 2014

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

效果图:
jQuery实现列表自动滚动循环滚动展示新闻jQuery实现列表自动滚动循环滚动展示新闻
上干货

html:

<div id="news">

<ul>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ccccccccccccccc">ccccccccccccccc</a></li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="ddddddddddddddd">ddddddddddddddd</a></li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="fffffffffffffff">fffffffffffffff</a></li>

<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
完美的js图片轮换效果
Feb 05 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
js验证密码强度解析
Mar 18 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 #Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 #Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 #Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 #Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 #Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 #Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 #Javascript
You might like
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
详解PHP队列的实现
2019/03/14 PHP
javascript 寻找错误方法整理
2014/06/15 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python的词法分析与语法分析
2013/05/18 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
RealTek面试题
2016/06/28 面试题
应届生体育教师自荐信
2013/10/03 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
社区工作者先进事迹
2014/01/18 职场文书
家长会学生演讲稿
2014/04/26 职场文书
创建青年文明号材料
2014/05/09 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL