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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
js实现简单的轮播图效果
Dec 13 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中for循环语句的几种变型
2007/03/16 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
php导入模块文件分享
2015/03/17 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
vuex的简单使用教程
2018/02/02 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
python中mechanize库的简单使用示例
2014/01/10 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python中操作符重载用法分析
2016/04/29 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
数控个人求职信范文
2014/02/03 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
镇创先争优活动总结
2014/08/28 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Python基础之条件语句详解
2021/06/16 Python