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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
js操作滚动条事件实例
Jan 29 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
ionic实现底部分享功能
May 11 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
WebWorker 封装 JavaScript 沙箱详情
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
php设计模式 State (状态模式)
2011/06/26 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php发送post请求的三种方法
2014/02/11 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP中的self关键字详解
2019/06/23 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
js实现无缝轮播图
2020/03/09 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
应聘教师推荐信
2013/10/31 职场文书
支教自我鉴定
2014/01/18 职场文书
大学毕业感言一句话
2014/02/06 职场文书
代办委托书怎么写
2014/08/01 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书