jquery实现文字由下到上循环滚动的实例代码


Posted in Javascript onAugust 09, 2013

有如下代码:

<div id="oDiv">
<ul id="oUl">
<li>第1个li元素</li>
<li>第2个li元素</li>
<li>第3个li元素</li>
<li>第4个li元素</li>
<li>第5个li元素</li>
<li>第6个li元素</li>
<li>第7个li元素</li>
<li>第8个li元素</li>
</ul>
</div>

但是页面只显示前5个li(相关css不做赘述),想要循环显示li里面的内容就是在制定的时间将ul向上移动li的高度,于此同时将第一个li加到ul中li的末尾。

代码如下:

function autoScroll(obj, ul_bz){
$(obj).find(ul_bz).animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
});
}
setInterval('autoScroll("#oDiv", "#oUl")',3000)
Javascript 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 #Javascript
15条JavaScript最佳实践小结
Aug 09 #Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 #Javascript
html向js方法传递参数具体实现
Aug 08 #Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 #Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 #Javascript
Jquery chosen动态设置值实例介绍
Aug 08 #Javascript
You might like
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP 表单提交给自己
2008/07/24 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
js表单登陆验证示例
2016/10/19 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
python中time、datetime模块的使用
2020/12/14 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
中专自荐信
2013/10/13 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
经典英文广告词
2014/03/18 职场文书
副处级干部考察材料
2014/05/17 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript