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使用append(content)方法注意事项分享
Jan 06 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
前端JavaScript大管家 package.json
Nov 02 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
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
二级域名转向类
2006/11/09 Javascript
不错的JS中变量相关的细节分析
2007/08/13 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
javaScript语法总结
2016/11/25 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python对象体系深入分析
2014/10/28 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
爷爷追悼会答谢词
2014/01/24 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
政治表现评语
2014/05/04 职场文书
法学求职信
2014/06/22 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
新郎结婚保证书
2015/02/26 职场文书
借款民事起诉状范文
2015/05/19 职场文书
导游词幽默开场白
2019/06/26 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python