实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示:

滚动的文字

  适当的运用<marquee>标签的参数,可以表现出不同的效果,请看下面的几个例子:

  1、左右弹来弹去的跑马灯
弹来弹去跑马灯!   实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动,direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值,例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。   源码粘贴框: <marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee>   2、跑的很快的跑马灯
跑的很快跑马灯!    只要在<marquee>标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。   3、带有超级链接的跑马灯
带超级链接的跑马灯!点我试试?          还有一条呢!点我试试?     实现的方法很简单,把整个<marquee></marquee>语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接,这样的跑马灯就可用来发布滚动新闻或是做站点导航了。   如果你想给跑马灯的文字加上颜色,换用不同的字体(默认是宋体,换体就要加代码),只要在文字前加上<FONT face=楷体_GB2312 color=#ff0000 size=3>就行了,你可在“face=”后边换上你喜欢的字体,在“color=”后边换上你喜欢的字颜色,在“size=”后边换上适合的字号,如果想让字体加粗,就再加上<STRONG>。
请看一下效果: 带超级链接的跑马灯!点我试试?      还有一条呢!点我试试?   上面效果的代码码如下: <marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷体_GB2312 color=#ff0000 size=3><STRONG>带有超链接的跑马灯!点我试试?</a>      <a href=http://954872988.qzone.qq.com/;还有一条呢!点我试试?</FONT></STRONG></a> </marquee>   以上几个例子都是<marquee>标签参数的应用,下面把所有可以利用的参数列在表中供你参考,不过还是要提醒你,<marquee>标签只被IE所支持,使用Netscape浏览器是看不到的噢。
参数 用法介绍
behavior=scroll, slide, alternate 跑马方式:循环绕行,只跑一次就停住,来回往复运动
direction=left,right 跑马方向:从左向右,从右向左
loop=100 跑马次数:循环100次,如不写默认为一直循环
width=100%,height=200 跑马范围:宽为100%,高为200像素
scrollamount=20 跑马速度:数越大越快
scrolldelay=500 跑马延时:毫秒数,利用它可实现跃进式滚动
hspace=20,vspace=20 跑马区域与其它区域间的空白大小
bgcolor=#00FFCC 跑马区域的背景颜色
face=楷体_GB2312 跑马灯文字字体
color=#ff0000 跑马灯文字颜色
size=3 跑马灯文字字号
STRONG 跑马灯文字加粗   你已经看到,尽管<marquee>参数不少,但毕竟不能实现复杂的和自定义的特殊跑马灯效果,而且还有浏览器限制,所以我们更多情况下会采用JavaScript来实现跑马灯。

html走马灯效果的更多相关文章

  1. Android TextView走马灯效果

    布局: <TextView android:id="@+id/myTextView" android:layout_width="match_parent" ...

  2. android中设置TextView/Button 走马灯效果

    在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml ...

  3. android - TextView单行显示...或者文字左右滚动(走马灯效果)

    条件 TextView单行显示,文字左右滚动(走马灯效果)实现条件: 实现单行设置固定宽度或者设置权重都行 代码 TextView滚动必须写下面几个属性 android:singleLine=&quo ...

  4. Jquery 图片走马灯效果原理

    本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> & ...

  5. css3 走马灯效果

    纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes.perspective.perspective-origin.tra ...

  6. vue 实现走马灯效果

    Part.1  问题 在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果 Part.2  实现 我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 ...

  7. 初学VUE 走马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. setTimeout()与setInterval()——走马灯效果

    JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout ...

  9. OC Swift 走马灯效果

    我们常见走马灯样式的功能,下面整理一下 Object-C 与 Swift 的实现代码 OC UILabel *label3 = [[UILabel alloc] initWithFrame:CGRec ...

  10. Android-两种方式实现走马灯效果

    第一种方法(很普遍,很简单的在xml布局文件中设置TextView的属性): <TextView android:id="@+id/tv_text" android:layo ...

随机推荐

  1. burpsuit 无法导入证书,抓取https的解决办法

    想用burpsuit中转https流量,需要安装证书: 确保浏览器能访问http 后,访问:http://burp/ 点击右上角下载证书. 然后导入,这些网上都有方法. 但如果你试了后: ①提示导入失 ...

  2. yum命令报错 yum update File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: --CentOS7.5

    1.问题: 使用yum命令如:yum update 报SyntaxError invalid syntax 2.原因分析 yum的解释器是Python,CentOS自带的yum采用(自带的)pytho ...

  3. 基于Bootsrap的BeyondAdmin前端模板 --分享

    1.PC端 2.移动端 3.下载 最新:http://www.yidt.cn/ 链接:https://pan.baidu.com/s/1Tx6EVmGFnVV7H7h3SFwldA 提取码:0btw

  4. LeetCode--015--三元之和(java)

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三元组. ...

  5. nlp基础(一)基本应用

    1.问答系统,它主要是针对那些有明确答案的用户问题,而且通常面向特定的领域,比如金融,医疗,这一类的机器人.它的技术实现方案分为基于检索和基于知识库两大类. 2.第二个任务型对话系统,大家看论文的时候 ...

  6. 『Python』内存分析_list和array

    零.预备知识 在Python中,列表是一个动态的指针数组,而array模块所提供的array对象则是保存相同类型的数值的动态数组.由于array直接保存值,因此它所使用的内存比列表少.列表和array ...

  7. Linux虚拟机的三种网络连接方式

    Linux虚拟机的三种网络连接方式 虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host- ...

  8. Makefile 宏定义 -D

    一.GCC编译器中使用:        -D macro=string,等价于在头文件中定义:#define   macro   string. 例如:-D TRUE=true,等价于:#define ...

  9. UVa 10905 - Children's Game 排序,题目没有说输入是int 难度: 0

    题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...

  10. Problem C: 类的初体验(III)

    Description 定义一个类Data,只有一个double类型的属性和如下4个方法: 1.   缺省构造函数,将属性初始化为0,并输出“Initialize a data 0”. 2.  带参构 ...