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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
js的Object.assign用法示例分析
Mar 05 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/10/09 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
js继承实现方法详解
2016/12/16 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python中创建二维数组
2018/10/17 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
详解Python类和对象内容
2021/06/22 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android