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 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 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
操作Oracle的php类
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php浏览历史记录的方法
2015/03/10 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python实现爬山算法的思路详解
2019/04/09 Python
Django中信号signals的简单使用方法
2019/07/04 Python
pytorch标签转onehot形式实例
2020/01/02 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
打架检讨书100字
2014/01/19 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
2014年领班工作总结
2014/11/25 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
用Python实现Newton插值法
2021/04/17 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle