jquery无缝间歇向上滚动(间断滚动)
2015-06-11 09:21
519 查看
jquery无缝间歇向上滚动
JS部份
HTML部份
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图片裁切+PHP文件上传
- 自己写了一个类似百度空间自动保存草稿的程序 php+jquery
- Jquery 取值,赋值学习总结
- JQuery 常用代码
- JQuery查找DOM节点的方法
- JQuery创建DOM节点的方法
- JQuery插入DOM节点的方法
- JQuery删除DOM节点的方法
- JQuery复制DOM节点的方法
- JQuery替换DOM节点的方法
- JQuery包裹DOM节点的方法
- JQuery节点元素属性操作方法
- JQuery实现样式设置、追加、移除与切换的方法
- jQuery使用drag效果实现自由拖拽div
- JS/Jquery判断对象为空的方法
- JQuery上传插件Uploadify使用详解
- 5 jQuery.each() Function Examples
- 前台限制ajax重复提交(利用jquery ajaxPrefilter实现)