<!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. MVC + ajaxform 文件上传

    一.前端cshtml代码 <tr> <td width="130" align="right">添加附件:</td> @us ...

  2. express-session相关用法

    通常我们在node的登录注册小案例时,我们经常要用到express-session做会话处理. express-sessionApi使用方法:https://github.com/expressjs/ ...

  3. BC32206 错误

    出现这种情况的话 排除代码引入dll版本的原因 看下是不是 你之前用net reflector 生成了pdb文件 导致项目引入的版本都是他生成的文件 处理方案就是 用everything 找到这个dl ...

  4. 持续集成之jenkins

    代码部署规划 安装jenkins yum -y install java-1.8.0cd /etc/yum.repos.d/wget http://pkg.jenkins.io/redhat/jenk ...

  5. Sublime2或3配置R、Scala、Python交互式环境

    1.Sublime3的下载地址:http://www.sublimetext.com/3 2.刚刚安装的软件是没有PackageControl的,需要在新安装使用 (1)   以前没有安装过Packa ...

  6. CCCC 排座位 图着色问题

    1排座位:https://www.patest.cn/contests/gplt/L2-010 2图着色问题 https://www.patest.cn/contests/gplt/L2-023 建图 ...

  7. js-之NaN和isNaN

    NaN (not is number) 不是一个数字的意思,在js中整型和浮点数都是Number类型. 除此之外,Number还有一个特殊的值,NaN. 一.可能会产生NaN值的情况 1.表达式计算, ...

  8. Ubuntu16.04下写的Qt程序，调试时没问题，运行时偶现崩溃 （需要在运行时生成core dump文件，QMAKE_CC += -g）

    记录一下 Ubuntu16.04下写的Qt程序,调试时没问题,运行时偶现崩溃 需要在运行时生成core dump文件 首先在pro结尾里加入 QMAKE_CC += -g QMAKE_CXX += - ...

  9. 10个实用的Django建议（转）

    前言:随着Django1.4第二个候选版的发布,虽然还不支持Python3,但Django团队已经在着手计划中,据官方博客所说, Django1.5将会试验性的支持python3.Django 作为一 ...

  10. 【Echarts】图表用echarts【待完善】

    echarts是做数据统计. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox ...