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

代码如下:

<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

赞 (0)

相关推荐

  • js 上下文字滚动效果

    js实现的文字向上滚动效果,适合文字公告等. test #textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} function ScrollText(content){ this.Delay=10; this.Amount=1; this.Direction="up"; this.Timeout=1000; this

  • js文字滚动停顿效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • JS实现单行文字不间断向上滚动的方法

    本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:

  • 向左滚动文字 js代码效果

    复制代码 代码如下: <html><head><title>滚动文字效果</title><style type="text/css">#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:

  • 浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

  • js文字横向滚动特效

    本文为大家分享了js文字横向滚动特效代码,具体实现内容如下: 页面布局 <div id="scroll_div" class="fl"> <div id="scroll_begin"> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_righ

  • javascript 单行文字向上跑马灯滚动显示

    代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现文字滚动效果

    js实现文字滚动效果

    首先先看一下大致效果图,因为是动态的,在页面无法显示出来. 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;} ul,li{list-style:none;} a{ text-decoration:none; color:#333;} #demo{ overflow:hidden; /*溢出的部分不显示*/ wi

  • javascript实现文字无缝滚动效果

    本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下 html <dl id="marquee" class="marquee"> <dt> <ul class="right-content"> <li> <a href="#" rel="external nofollow" rel="external nofollow"

  • js实现的文字横向无间断滚动

    我一开始想到的标签是<marquee>,因为它可以实现横向滚动.经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行.查了相关资料,才知道<marquee>无法指定起始位置.后来在网上找到一段代码,它是用图片来实现的,我将图片改成文字之后,顺利地实现了我所想要的功能.代码如下: #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-fam

随机推荐