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的图片大小自动适应实现代码
Nov 17 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
js实现分页功能
May 24 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
PHP7 弃用功能
2021/03/09 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
python math模块的基本使用教程
2021/01/16 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
考试不及格检讨书
2014/01/09 职场文书
青春无悔演讲稿
2014/05/08 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python