jquery无缝向上滚动实现代码

更新时间：2013年03月29日 16:34:24 作者：

向上滚动的效果想必大家都见过吧!无缝间歇向上滚动应该也不会陌生吧，接下来为大家介绍下jquery实现无缝间歇滚动，感兴趣的朋友可以参考下哈，希望可以帮助到你们

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> 

您可能感兴趣的文章:

基于jQuery的投票系统显示结果插件
投票系统是网站中十分常见的系统，显示结果也是十分常见的。最近因为项目需要开发了一个投票结果显示jQuery插件。
2011-08-08
jquery.mousewheel实现整屏翻屏效果
jQuery Mousewheel 用于添加跨浏览器的鼠标滚轮支持。 mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。
2015-08-08
JQuery调webservice实现邮箱验证(检测是否可用)
JQuery调webservice实现邮箱验证:判断邮箱是否存在如果不存在提示可以使用否从提示该邮箱已存在请重新输入，感兴趣的朋友可以参下哈，希望对你有所帮助
2013-05-05
JQuery的加载和选择器用法简单示例
这篇文章主要介绍了JQuery的加载和选择器用法,结合简单实例形式分析了jQuery的功能、加载、选择器的相关使用技巧,需要的朋友可以参考下
2019-05-05
jQuery简单几行代码实现tab切换
本文给大家介绍的是一款使用jQuery实现的简易选项卡的代码，通过控制css熟悉来实现tab切换，思路清晰，这里推荐给大家。
2015-03-03
jQuery中addClass()方法用法实例
这篇文章主要介绍了jQuery中addClass()方法用法,实例分析了addClass()方法的功能、定义及向匹配元素添加一个或多个类的使用技巧,需要的朋友可以参考下
2015-01-01
实测jquery data()如何存值
jQuery的数据框架没有将元素数据当作元素属性来存储，我记得是可以通过jQuery的data("xxx")方法取HTML标签上的data-xxx属性的值的
2013-08-08
jQuery源码分析之Callbacks详解
这篇文章主要分为以下知识：什么是Callbacks、Callbacks模型、基本模块实现、once和auto(memory)、源码和源码下载，十分的细致全面，这里推荐给大家，有需要的小伙伴参考下吧。
2015-03-03
jquery组件使用中遇到的问题整理及解决
在ASP.net中母版页加载js文件，页面中调用时出错、tablesorter加载失败等等,需要的朋友可以参考下
2014-02-02
jQuery使用JSONP实现跨域获取数据的三种方法详解
这篇文章主要介绍了jQuery使用JSONP实现跨域获取数据的三种方法,结合实例形式对比分析了jsonp跨域获取数据的3种常用操作技巧,需要的朋友可以参考下
2017-05-05