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代码
May 27 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
javascript 回调函数详解
Nov 11 Javascript
javascript几个易错点记录
Nov 26 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
javascript刷新父页面方法汇总详解
Oct 10 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
用js实现in_array的方法
2013/11/05 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python读写ini文件的方法
2015/05/28 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python continue继续循环用法总结
2018/06/10 Python
python实现反转部分单向链表
2018/09/27 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
联想英国官网:Lenovo英国
2019/07/17 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
2014年档案室工作总结
2014/12/01 职场文书
感谢信范文大全
2015/01/23 职场文书
2015年信访工作总结
2015/04/07 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
实操Python爬取觅知网素材图片示例
2021/11/27 Python