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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript File分段上传
Mar 10 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
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实现Ftp用户的在线管理
2012/02/16 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js获取视频时长代码
2014/04/10 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
yy婚礼主持词
2014/03/14 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
怎样写辞职信
2015/02/27 职场文书