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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
jQuery的三种$()
Dec 30 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
封装属于自己的JS组件
Jan 27 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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基础知识:控制结构
2006/12/13 PHP
php+mysql分页代码详解
2008/03/27 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
详解vue express启动数据服务
2017/07/05 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
django框架如何集成celery进行开发
2017/05/24 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python 实现性别识别
2020/11/21 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
小学教师培训方案
2014/06/09 职场文书
班主任先进事迹材料
2014/12/17 职场文书
先进人物事迹材料
2014/12/29 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android
Python面试不修改数组找出重复的数字
2022/05/20 Python