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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
DOM 基本方法
2009/07/18 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python 网络编程常用代码段
2016/08/28 Python
Python语言描述随机梯度下降法
2018/01/04 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
成品库仓管员岗位职责
2014/04/06 职场文书
绿色校园广播稿
2014/10/13 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014年环卫工作总结
2014/11/22 职场文书
关于感谢信的范文
2015/01/23 职场文书
停车场管理制度范本
2015/08/05 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL