<!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. 总结一下最近用到的技术(2)--JsonSchema和JsonSchemaValidator

    我们最早接触xml的时候会使用一个dtd文件去定义xml里可以有哪些元素和属性等,后来发展到xml schama(是一个xsd文件,在dtd的基础上提供了命名空间等更强大的功能) 现在,RESTful ...

  2. State Server实现多机器多站点 Session 共享 全手记

    网络环境有2台windows 2008 (192.168.1.71,192.168.1.72) 需要部署成 WebFarm,提高容错性. 网站部署在2台机器上的2个站点,如何才能做到Session的共 ...

  3. [工具] Citavi – 文献管理软件(笔记记录)

    https://www.citavi.com/en/ 如果你有论文写作的需求,特别是对于科研人员.研究生来说,文献管理软件是不可或缺的.目前流行的文献管理软件有老牌的 EndNote,本土化的 Not ...

  4. [Log]ASP.NET之HttpModule 事件执行顺序

    ASP.Net下的HttpModule是基于事件的处理模型,这使得我们在选择事件监听和处理的时候有更多选择.下面是对HttpModule有关事件被触发的监测: 有关代码如下 using System; ...

  5. 用js内置对象XMLHttpRequest 来用ajax

    步骤: /* 用XMLHTTPRequest来进行ajax异步数据交交互*/ 主要有几个步骤: //1.创建XMLHTTPRequest对象 //最复杂的一步 if (window.XMLHttpRe ...

  6. MatLab Mark Points 给点标序号

    在MatLab中,我们有时要给画出的点按一定顺序标上序号,下面这个简单的例子实现这个功能: x=rand(,); y=rand(,); plot(x,y,'r*'); text(x+:));

  7. Navicat 同步数据库中数据

     Navicat工具同步两个数据库中的数据 第一步在我们的电脑里面打开navicat软件,打开要复制表的数据库,如下图所示:   第二步点击上方的“工具->数据传输”,如下图所示:   第三步进 ...

  8. postgresql----文本搜索类型和检索函数

    postgresql提供两种数据类型用于支持全文检索:tsvector类型产生一个文档(以优化全文检索形式)和tsquery类型用于查询检索. tsvector的值是一个无重复的lexemes排序列表 ...

  9. OSS命令行工具ossutil

    ossutil工具旨在为您提供一个以命令行方式管理OSS数据的途径.当前版本未提供完整的Bucket和Multipart管理功能,相关功能会在后续版本中开发.如果您需要使用上述功能,建议先使用ossc ...

  10. POJ-1959 Darts

    Darts Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1286 Accepted: 741 Description Back ...