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 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
js中判断控件是否存在
Aug 25 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
使用vue实现通过变量动态拼接url
Jul 22 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
一个分页的论坛
2006/10/09 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php无序树实现方法
2015/07/28 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
表单提交验证类
2006/07/14 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
WebPack配置vue多页面的技巧
2018/05/15 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
python三引号如何输入
2020/07/06 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
电子商务专业学生的学习自我评价
2013/10/27 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
创先争优一句话承诺
2014/05/29 职场文书
会计求职简历自我评价
2015/03/10 职场文书
道歉短信大全
2015/05/12 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书