jquery无缝向上滚动实现代码


Posted in Javascript onMarch 29, 2013

JS部份

$(function(){ 
var $this = $(".renav"); 
var scrollTimer; 
$this.hover(function(){ 
clearInterval(scrollTimer); 
},function(){ 
scrollTimer = setInterval(function(){ 
scrollNews( $this ); 
}, 2000 ); 
}).trigger("mouseout"); 
}); 
function scrollNews(obj){ 
var $self = obj.find("ul:first"); 
var lineHeight = $self.find("li:first").height(); 
$self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){ 
$self.css({"margin-top":"0px"}).find("li:first").appendTo($self); 
}) 
}

HTML部份
<style type="text/css"> 
.renav{ 
width:200px; 
height:150px; 
line-height:21px; 
overflow:hidden; 
background:#FFFFFF; 
} 
.renav li{ 
height:21px; 
} 
</style> 
<div class="renav"> 
<ul style="margin-top: 0px;"> 
<li><a>罗氏</a></li> 
<li><a>瑞声达</a></li> 
<li><a>未添加1</a></li> 
<li><a>未添加2</a></li> 
<li><a>未添加3</a></li> 
<li><a>未添加4</a></li> 
<li><a>西门子</a></li> 
<li><a>欧姆龙</a></li> 
</ul> 
</div>
Javascript 相关文章推荐
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
验证码按回车不变解决方法
Mar 29 #Javascript
Jquery 自定义动画概述及示例
Mar 29 #Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 #Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 #Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 #Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 #Javascript
JS 跳转页面延迟2种方法
Mar 29 #Javascript
You might like
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
php object转数组示例
2014/01/15 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
python系列 文件操作的代码
2019/10/06 Python
numpy 声明空数组详解
2019/12/05 Python
Python with标签使用方法解析
2020/01/17 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
《我的第一本书》教学反思
2014/02/15 职场文书
质量标语大全
2014/06/12 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
国博复兴之路观后感
2015/06/02 职场文书
贫困生证明范文
2015/06/16 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
德生2P3收音机开箱评测
2022/04/30 无线电