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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
vue配置nprogress实现页面顶部进度条
Sep 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
学习php过程中的一些注意点的总结
2013/10/25 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP加密解密实例分析
2015/12/25 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Pytorch转tflite方式
2020/05/25 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
python如何使用代码运行助手
2020/07/03 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
教育孩子心得体会
2014/01/01 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
眼镜促销方案
2014/03/15 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书