<!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. python 里面的%s和%r的区别

    虽然这两个占位符(pytho里叫做格式符)用法相同,但是效果却是不一样的 %s是将变量传到str()函数中,结果是将变量转化适合人阅读的格式 %r是将变量穿到repr()函数中,结果是将变量转化成适合 ...

  2. 23种设计模式之观察者模式(Observer)

    观察者模式又称为发布—订阅模式.模型—视图模式.源-监听器模式或从属者(dependents)模式,是一种对象的行为型模式.它定义了对象之间的一种一对多的依赖关系,使得每当一个对象状态发生改变时,其相 ...

  3. matlab 获取网卡MAC地址

    输入命令 [sta,MACres] =  dos('getmac'); 其中MACres 存储的信息即为网卡的 相关信息. 如果想判断读取的网卡信息是否有指定信息可以如下输入 USER1 = strf ...

  4. TFS二次开发02——连接TFS

    在上一篇<TFS二次开发01——TeamProjectsPicher>介绍了  TeamProjectsPicher 对象,使用该对象可以很简单的实现连接TFS. 但是如果我们要实现自定义 ...

  5. 寻找 IBatisNet 批量插入(批量复制) 的心路历程

    1.IBatisNet本身就是一个比较早的ORM框架,再加上是从java iBatis移值过来的,其流行程度不是特别高资料也不是很多(一年前),不过最近好像搜索比较多了一些(可能是训练的结果吧) 2. ...

  6. JavaScript 包管理工具npm 和yarn 对比

  7. elasticsearch的重启

    没有重启的操作,只有关闭了再启动的操作. ps -ef | grep elastic e表示全部的进程,f表示展示进程间的相关关系,如父子进程. 然后找到你启动es的那个账号,不是root,一般是新建 ...

  8. IO流(4)重命名

    重命名功能:public boolean renameTo(File dest) * 如果路径名相同,就是改名. * 如果路径名不同,就是改名并剪切. * * 路径以盘符开始:绝对路径 c:\\a.t ...

  9. mysql python pymysql模块 增删改查 查询 fetchone

    import pymysql mysql_host = '192.168.0.106' port = 3306 mysql_user = 'root' mysql_pwd = ' encoding = ...

  10. windows平台mysql密码破解设置

    windows平台下,5.7版本mysql,破解密码的两种方式: #1 关闭mysql服务net stop mysql 启动mysql服务 跳过权限 #2 在cmd中执行:mysqld --skip- ...