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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
svg动画之动态描边效果
Feb 22 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
在node中如何使用 ES6
Apr 22 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 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
PHP Switch 语句之学习笔记
2013/09/21 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python统计字符的个数代码实例
2020/02/07 Python
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
mysql优化
2021/04/06 MySQL
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
python manim实现排序算法动画示例
2022/08/14 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS