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 相关文章推荐
Textarea根据内容自适应高度
Oct 28 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
验证码按回车不变解决方法
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语法(1)
2006/10/09 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Laravel日志用法详解
2016/10/09 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
vue 项目build错误异常的解决方法
2019/04/22 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python二分法搜索算法实例分析
2015/05/11 Python
python编写爬虫小程序
2015/05/14 Python
python编程使用协程并发的优缺点
2018/09/20 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
毕业生动漫设计求职信
2013/10/11 职场文书
教师实习的自我鉴定
2013/10/26 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
给全校老师的建议书
2014/03/13 职场文书
家具商场的活动方案
2014/08/16 职场文书
相亲活动方案
2014/08/26 职场文书
作风大整顿心得体会
2014/09/10 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
Java常用函数式接口总结
2021/06/29 Java/Android
HTML基本元素标签介绍
2022/02/28 HTML / CSS