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 Date概念详细介绍
Nov 22 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
聊聊JS ES6中的解构
Apr 29 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
PHP 编程安全性小结
2010/01/08 PHP
php四种基础算法代码实例
2013/10/29 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
js实现导航跟随效果
2018/11/17 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python Timer 类使用介绍
2020/12/28 Python
介绍一下linux的文件权限
2014/07/20 面试题
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
医院总经理岗位职责
2014/02/04 职场文书
工程质量月活动方案
2014/02/19 职场文书
公司活动方案范文
2014/03/06 职场文书
交通事故私了协议书
2014/04/16 职场文书
党支部特色活动方案
2014/08/20 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
讲座通知范文
2015/04/23 职场文书