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 URL传中文参数引发的乱码问题
Sep 02 Javascript
jquery 使用点滴函数代码
May 20 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
JavaScript利用键盘码控制div移动
Mar 19 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
Django卸载之后重新安装的方法
2017/03/15 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python 列表降维的实例讲解
2018/06/28 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
numpy基础教程之np.linalg
2019/02/12 Python
python实现最小二乘法线性拟合
2019/07/19 Python
提高python代码运行效率的一些建议
2020/09/29 Python
美国在线家装零售商:Build.com
2016/09/02 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
《四季》教学反思
2014/04/08 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
小学生评语集锦
2014/04/18 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
公司经营目标责任书
2015/01/29 职场文书
酒会开场白大全
2015/06/01 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
Python获取字典中某个key的value
2022/04/13 Python