jquery无缝向上滚动实现代码

转载 2013-03-29 作者：我要评论

向上滚动的效果想必大家都见过吧!无缝间歇向上滚动应该也不会陌生吧，接下来为大家介绍下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增加了并扩展了基本的事件处理机制，不但提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力。本文将对此进行详细介绍，需要的朋友一起来看下吧
2016-12-12
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionWidgets实现的Cylinder图效果,结合实例形式分析了jQuery使用FusionWidgets结合swf文件读取xml数据并采用Cylinder图展示的相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
通过pjax实现无刷新翻页(兼容新版jquery)
这篇文章主要介绍了通过pjax实现无刷新翻页，兼容新版jquery，使用心得方法,需要的朋友可以参考下
2014-01-01
EasyUI实现第二层弹出框的方法
本文给大家分享的是一则使用EasyUI实现第二层弹出框的方法，核心代码是网友提供，这里结合自己的项目需求，完善了下，推荐给大家。
2015-03-03
jQuery 获取对象定位子对象
jQuery 获取对象定位子对象，学习jquery 定位子对象的朋友可以参考下。
2010-05-05
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，在现在的Web开发项目中扮演着重要角色。这篇文章与大家分享33个优秀的 jQuery 教程，教您如何使用 jQuery 制作幻灯片、动画菜单、照片墙、图片画廊等很多效果很炫的功能。
2011-07-07
jQuery父级以及同级元素查找介绍
父级以及同级元素的查找在使用过程中还是蛮频繁的，下面为大家介绍下jQuery是如何实现的，感兴趣的朋友可以参考下
2013-09-09
jquery ui resize 中border-box的bug修正
本文给大家分享的是jQuery ui resize中的一个样式的小bug的解决方法，官方并没有修复，这里推荐给大家，有需要的小伙伴可以参考下。
2015-04-04
jQuery获取浏览器类型和版本号的方法
这篇文章主要介绍了jQuery获取浏览器类型和版本号的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
jquery点击页面任何区域实现鼠标焦点十字效果
鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素，这些都是在系统开发是经常需要用到的，下面为大家介绍下具体的实现，感兴趣的朋友可以参考下哈
2013-06-06