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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JavaScript中Function详解
Feb 27 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
js实现上传图片预览方法
Oct 25 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
基于vue的video播放器的实现示例
Feb 19 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中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python迭代器的使用方法实例
2013/11/21 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Django自定义分页效果
2017/06/27 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
浅谈python出错时traceback的解读
2020/07/15 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
光声世纪笔试题目
2012/08/25 面试题
设计模式的基本要素是什么
2014/04/21 面试题
工作时间上网检讨书
2014/02/03 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python