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 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
浅说js变量
2011/05/25 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Anaconda和ipython环境适配的实现
2020/04/22 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
新闻编辑自荐信
2013/11/03 职场文书
财务会计专业推荐信
2013/11/30 职场文书
欢送退休感言
2014/02/08 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Mysql数据库命令大全
2021/05/26 MySQL