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 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 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简单提示框alert封装函数
2010/08/08 PHP
php实现图片添加水印功能
2014/02/13 PHP
iOS10推送通知开发教程
2016/09/19 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
javascript实现下雨效果
2017/03/27 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
Python实现统计代码行的方法分析
2017/07/12 Python
python学习必备知识汇总
2017/09/08 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
Exception类的常用方法
2012/06/16 面试题
应届生财务管理求职信
2013/11/06 职场文书
绩效考核实施方案
2014/03/18 职场文书
网络编辑求职信
2014/04/30 职场文书
班级活动总结格式
2014/08/30 职场文书
紧急迫降观后感
2015/06/15 职场文书
教师外出学习心得体会
2016/01/18 职场文书