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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
js编写选项卡效果
May 23 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
当海贼王变成JOJO风
2020/03/02 日漫
php邮件发送,php发送邮件的类
2011/03/24 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
车间副主任岗位职责
2013/12/24 职场文书
便利店的创业计划书
2014/01/15 职场文书
导购员的岗位职责
2014/02/08 职场文书
求职意向书范文
2014/04/01 职场文书
关于美容院的活动方案
2014/08/14 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python