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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
Ext 今日学习总结
Sep 19 Javascript
最短的IE判断代码
Mar 13 Javascript
JsRender实用入门教程
Oct 31 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
bootstrap IE8 兼容性处理
2017/03/22 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
pyenv命令管理多个Python版本
2017/03/26 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
简单介绍django提供的加密算法
2019/12/18 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
数百万免费的图形资源:Freepik
2020/09/21 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
第二课堂活动总结
2014/05/07 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
在Python中如何使用yield
2021/06/07 Python
Linux中sftp常用命令整理
2022/06/28 Servers