<!DOCTYPE html>
<html>
<head>
<title>跑马灯大全</title>
</head>
<body>
<marquee onmouseout="this.start()" onmouseover="this.stop()" id="aaaa">
<div>
<img src="data:images/haier_logo.png">
<img src="data:images/ts_logo.png">
<img src="data:images/jykj_logo.png">
<img src="data:images/jz_logo.png">
<img src="data:images/klc_logo.png">
<img src="data:images/kp_logo.png">
<img src="data:images/lp_logo.png">
<img src="data:images/smsx_logo.png">
<img src="data:images/lf_logo.png">
<img src="data:images/yd_logo.png">
<img src="data:images/wpt_logo.png">
<img src="data:images/ygr_logo.png">
</div>
</marquee>
<marquee contenteditable="true" >滚动的文字</marquee>
<marquee behavior=alternate>表示双向移动</marquee>
<marquee direction=left>表示运动方向向左</marquee>
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
<marquee scrollamount="30">表示运动方向向左</marquee>
<marquee width=90%>
<a href="http://www.jb51.net"　target="_blank">带有超链接的跑马灯!点我试试？</a>
<a href="http://www.baidu.com" target="_blank">还有一条呢!点我试试？</a>
</marquee>
<br /><br />用marquee实现首尾相连循环滚动效果（仅IE7以下）：<br /><br />
<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="500">
<SPAN unselectable="on">这里是要滚动的内容</SPAN>
</marquee>
<br /><br />用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br /><br />
<div id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;">
<span>这里是要滚动的内容</span>
</div>
<table width="93%" border="1" cellspacing="0" cellpadding="1" align="center" class="p1">
<tr><td width="42%">参数</td><td width="58%">用法介绍</td></tr>
<tr><td width="42%">behavior=scroll, slide, alternate</td><td width="58%">跑马方式：循环绕行，只跑一次就停住，来回往复运动</td></tr>
<tr><td width="42%">direction=left,right,up,down</td><td width="58%">跑马方向：运动方向向左，运动方向向右，运动方向向上，运动方向向下</td></tr>
<tr><td width="42%">loop=100</td><td width="58%">跑马次数：循环100次，如不写默认为一直循环</td></tr>
<tr><td width="42%">width=100%,height=200</td><td width="58%">跑马范围：宽为100%，高为200像素</td></tr>
<tr><td width="42%">scrollamount=20</td><td width="58%">跑马速度：数越大越快</td></tr>
<tr><td width="42%">scrolldelay=500</td><td width="58%">跑马延时：毫秒数，利用它可实现跃进式滚动</td></tr>
<tr><td width="42%">hspace=20，vspace=20</td><td width="58%">跑马区域与其它区域间的空白大小</td></tr>
<tr><td width="42%">bgcolor=#00FFCC</td><td width="58%">跑马区域的背景颜色</td></tr>
</table>
<script type="text/javascript">
function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//当滚动条到达右边顶端时
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
</script> 　　
</body>
</html>

marquee实现跑马灯的更多相关文章

  1. marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

  2. 浅谈TextView Ellipsize效果与Marquee跑马灯无效果问题

    说到TextView 效果,相信大家一定熟悉跑马灯. 先来看看 Ellipsize是什么,Ellipsize 从开发技术上翻译为省略效果.故名思议,就是当文本无法显示全部时,用什么效果来显示未显示的部 ...

  3. Android-TextView跑马灯效果

    要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...

  4. Android 文字自动滚动（跑马灯）效果的两种实现方法[特别好使]

    有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextV ...

  5. Textview在Listview中实现跑马灯效果

    textview添加属性:   android:singleLine="true" 表示单行显示   android:ellipsize="marquee" 设 ...

  6. Android:TextView 自动滚动(跑马灯) （转）

    Android:TextView 自动滚动(跑马灯)       TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true ...

  7. js+css简单效果（幕布，跑马灯）

    2.js普通的盒子,css的优先级 css的优先级 !important >>>>>  style 行内样式  >>>>> #id选择器 # ...

  8. Android TextView 横向滚动（跑马灯效果）

    Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...

  9. TextView: android:ellipsize="marquee" 跑马灯效果无效的问题

    今天练习的时候想实现一个文字的跑马灯效果,本来想自己手动实现的,不过突然想起来android里的TextView属性似乎自带了这个效果,叫: android:ellipsize ,平时都是把它的属性值 ...

随机推荐

  1. STM32 ADC转换时间

    STM32F103XX的ADC的采样时钟最快14MHz,最快采样率为1MHz. ADC时钟: 这个ADC时钟是从哪来的呢.我们看下面这个STM32的时钟结构图: 我们大多使用STM32的最快PCLK2 ...

  2. H3C系列之三层交换机dhcp功能的开启

    环境介绍>>>>>>>>>>>>>>>>>>>>交换机名牌:H3C交换机类型:三 ...

  3. 【BZOJ2138】stone Hall定理+线段树

    [BZOJ2138]stone Description 话说Nan在海边等人,预计还要等上M分钟.为了打发时间,他玩起了石子.Nan搬来了N堆石子,编号为1到N,每堆包含Ai颗石子.每1分钟,Nan会 ...

  4. 完美解决Android SDK Manager无法更新

    由于国内的各种屏蔽现在Android SDK Manager出现无法更新或更新太慢,如下方法可完美解决此问题 1. 打开..\Android\sdk\SDK Manager.exe  2.

  5. 如何使用Jquery 引入css文件

    如何使用Jquery 引入css文件: $("head").append("<link>");var toolbarCss = $("he ...

  6. dubbo入门之helloWorld

    dubbo官方文档:http://dubbo.apache.org/zh-cn/docs/user/quick-start.html 基于spring coloud的demo:http://start ...

  7. Spark2 oneHot编码--标准化--主成分--聚类

    1.导入包 import org.apache.spark.sql.SparkSession import org.apache.spark.sql.Dataset import org.apache ...

  8. Java--static、final、static final的区别

    一.final final修饰类:表示该类不能被继承:final类中的方法默认是final的: final修饰方法:表示该方法无法被重写: final修饰方法参数:表示在变量的生存期中它的值不能被改变 ...

  9. SecTools.Org--bp

    Burp Suite使用介绍(一) | WooYun知识库  http://drops.wooyun.org/tips/2227     我的渗透利器 | EVILCOS             fr ...

  10. http://www.cnblogs.com/linxiyue/p/8244724.html

    http://www.cnblogs.com/linxiyue/p/8244724.html