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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
重学JS之显示强制类型转换详解
Jun 30 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
javascript中的面向对象
2017/03/30 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python 进程的几种创建方式详解
2019/08/29 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
鲜果饮品店创业计划书
2014/01/21 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
大学生社会实践方案
2014/05/11 职场文书
机械工程师岗位职责
2014/06/16 职场文书
会计电算化实训报告
2014/11/04 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
电影红河谷观后感
2015/06/11 职场文书
工作态度怎么写
2015/06/25 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技