<!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. browsersync即时刷新页面

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面 官网: http://browsersync.cn/ 多个浏览器.多个设备间来 ...

  2. 从底层源码浅析Mybatis的SqlSessionFactory初始化过程

    目录 搭建源码环境 POM依赖 测试SQL Mybatis全局配置文件 UserMapper接口 UserMapper配置 User实体 Main方法 快速进入Debug跟踪 源码分析准备 源码分析 ...

  3. ubuntu下中文乱码解决方案(全)

    转自 http://www.cnblogs.com/end/archive/2011/04/19/2021507.html   1.ibus输入法 Ubuntu 系统安装后已经自带了ibus输入法,在 ...

  4. 二步实现 远程连接 阿里云SqlServer 2012 数据库服务器

    前言:在使用 阿里云 上的一些产品时,遇到不少坑. 安装IIS 时,遇到 因买的配置过低,虚拟内存不足,而导致 IIS 总是安装失败: 现在 在上面安装了个 Sql Sever 2012,远程老是 不 ...

  5. Ucloud云主机无法yum安装处理办法

    Ucloud云主机在yum安装的时候出现这个提示 执行一下命令 yum --disablerepo=salttestyum-config-manager --disable salttestyum-c ...

  6. ImageGrab.grab()全屏抓取错误

    前几天看见知乎上的连连看外挂就想着自己试一下 但是搞了半天发现截取全屏的图片就出现了问题 截取的图片其实只有屏幕左上角的一部分 大概就这样: 用的是PIL  ImageGrab里的grab函数 没加参 ...

  7. hadoop（角色）各个组件配置信息

    1)namenode:        core-site.xml文件中决定:            <property>                <name>fs.def ...

  8. msc文件

    MSC微软管理控制台(Microsoft Management Control)文件.可以点击开始/运行,然后输入下列文件名就可以打开相应的控制窗口. 除第三个文件外,其他均在C:\WINDOWS\s ...

  9. MongoDB的数据恢复

    当MongoDB正在插入或更新数据时,若突然出现断电或者不可逆转的摧毁性事件发生时,MongoDB没有像oracle或sql server这种关系型数据库提供事物机制,所以会产生垃圾数据.但Mongo ...

  10. noip做题记录+挑战一句话题解?

    因为灵巧实在太弱辽不得不做点noip续下命QQAQQQ 2018 积木大赛/铺设道路 傻逼原题? 然后傻逼的我居然检查了半天是不是有陷阱最后花了差不多一个小时才做掉我做过的原题...真的傻逼了我:( ...