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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
jquery图片切换实例分析
Apr 15 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
编写PHP的安全策略
2006/10/09 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python中的错误处理
2016/04/10 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
java程序员面试交流
2012/11/29 面试题
信息专业本科生个人的自我评价
2013/10/28 职场文书
敬老院活动总结
2014/04/28 职场文书
跑操口号
2014/06/12 职场文书
法人授权委托书样本
2014/09/19 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python