JS实现div内部的文字或图片自动循环滚动代码


Posted in Javascript onApril 19, 2013
<style type="text/css"> 
.content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden} 
dl{width:400px;height:30px;border:1px solid black;} 
</style> 
<div class="content"> 
<dl> 
<dt>测试数据1</dt> 
</dl> 
<dl> 
<dt>测试数据2</dt> 
</dl> 
<dl> 
<dt>测试数据3</dt> 
</dl> 
<dl> 
<dt>测试数据4</dt> 
</dl> 
<dl> 
<dt>测试数据5</dt> 
</dl> 
<dl> 
<dt>测试数据6</dt> 
</dl> 
<dl> 
<dt>测试数据7</dt> 
</dl> 
<dl> 
<dt>测试数据8</dt> 
</dl> 
<dl> 
<dt>测试数据9</dt> 
</dl> 
<dl> 
<dt>测试数据10</dt> 
</dl> 
</div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('.content dl').hide(); 
$('.content dl:gt('+($('.content dl').length - 5)+')').show(); 
window.setInterval(function(){ 
$('.content dl:visible:first').prev().slideDown("fast",function(){ 
$(this).animate({opacity:1},2000,function(){ 
if($('.content dl:hidden').length == 0){ 
$('.content dl').hide(); 
$('.content dl:gt('+($('.content dl').length - 5)+')').show(); 
} 
}); 
}); 
},1000); 
}); 
</script>

代码演示地址:
http://www.nailyo.com/js_demo/gundong.html
Javascript 相关文章推荐
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 #Javascript
jQuery阻止同类型事件小结
Apr 19 #Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 #Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 #Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 #Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 #Javascript
JQuery 常用方法和事件详细介绍
Apr 18 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
PHP串行化与反串行化实例分析
2016/12/27 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
jquery实现心算练习代码
2010/12/06 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
使用tensorflow实现线性回归
2018/09/08 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
类和结构的区别
2012/08/15 面试题
生物制药专业求职信
2014/03/11 职场文书
创业融资计划书
2014/04/25 职场文书
教师业务培训方案
2014/05/01 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
八年级物理教学反思
2016/02/19 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers