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中的事件

    jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力。本文将对此进行详细介绍,需要的朋友一起来看下吧
    2016-12-12
  • jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】

    jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件FusionWidgets实现的Cylinder图效果,结合实例形式分析了jQuery使用FusionWidgets结合swf文件读取xml数据并采用Cylinder图展示的相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • 通过pjax实现无刷新翻页(兼容新版jquery)

    通过pjax实现无刷新翻页(兼容新版jquery)

    这篇文章主要介绍了通过pjax实现无刷新翻页,兼容新版jquery,使用心得方法,需要的朋友可以参考下
    2014-01-01
  • EasyUI实现第二层弹出框的方法

    EasyUI实现第二层弹出框的方法

    本文给大家分享的是一则使用EasyUI实现第二层弹出框的方法,核心代码是网友提供,这里结合自己的项目需求,完善了下,推荐给大家。
    2015-03-03
  • jQuery 获取对象 定位子对象

    jQuery 获取对象 定位子对象

    jQuery 获取对象 定位子对象,学习jquery 定位子对象的朋友可以参考下。
    2010-05-05
  • 33个优秀的jQuery 教程分享(幻灯片、动画菜单)

    33个优秀的jQuery 教程分享(幻灯片、动画菜单)

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,在现在的Web开发项目中扮演着重要角色。这篇文章与大家分享33个优秀的 jQuery 教程,教您如何使用 jQuery 制作幻灯片、动画菜单、照片墙、图片画廊等很多效果很炫的功能。
    2011-07-07
  • jQuery父级以及同级元素查找介绍

    jQuery父级以及同级元素查找介绍

    父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下
    2013-09-09
  • jquery ui resize 中border-box的bug修正

    jquery ui resize 中border-box的bug修正

    本文给大家分享的是jQuery ui resize中的一个样式的小bug的解决方法,官方并没有修复,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • jQuery获取浏览器类型和版本号的方法

    jQuery获取浏览器类型和版本号的方法

    这篇文章主要介绍了jQuery获取浏览器类型和版本号的方法 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • jquery点击页面任何区域实现鼠标焦点十字效果

    jquery点击页面任何区域实现鼠标焦点十字效果

    鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素,这些都是在系统开发是经常需要用到的,下面为大家介绍下具体的实现,感兴趣的朋友可以参考下哈
    2013-06-06

最新评论