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 相关文章推荐
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
详解如何运行vue项目
2019/04/15 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
文秘专业毕业生就业推荐信
2013/11/08 职场文书
模范教师事迹材料
2014/02/10 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL