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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python中尾递归用法实例详解
2015/04/28 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
Hibernate持久层技术
2013/12/16 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
简历的自荐信
2013/12/19 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
党员承诺书内容
2014/03/26 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP