时间:2021-05-26
复制代码 代码如下:
<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:///js_demo/gundong.html
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js+div实现文字滚动和图片切换效果代码。分享给大家供大家参考。具体如下:这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调
复制代码代码如下:分别用marquee和div+js实现首尾相连循环滚动效果用marquee实现首尾相连循环滚动效果(仅IE):这里是要滚动的内容用DIV+ja
本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:js实现鼠标悬停图片上时的滚动文字说明希望本
效果:鼠标移入图片停止滚动,鼠标移出自动滚动可以调整向左或右方向滚动复制代码代码如下:*{margin:0;padding:0;}#div1{overflow:
本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下1、图片格式:260*400.2、使用循环定时器轻松实现无缝滚动.row{width:12