html跑马灯/走马灯效果

news/2024/11/24 22:24:02/

http://blog.sina.com.cn/s/blog_a7b8ab2801019gog.html

实现跑马灯的方法很多,其中最简单的是采用一句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来实现跑马灯。



http://www.ppmy.cn/news/847981.html

相关文章

单片机跑马灯代码示例

#include "reg52.h" #include <stdio.h>// 准备工作&#xff1a;P0的8个引脚和8个LED引脚用排线相连 #define LED P0// 延时多少毫秒&#xff0c;这里是基于晶振12Mhz的51单片机 void Delay1ms(unsigned short time) {unsigned short j 0;for (j 0; j < t…

跑马灯代码

//*********跑马灯代码 //********************ViewController.m中 #import "ViewController.h" #import "Lightview.h" interface ViewController () end implementation ViewController - (void)viewDidLoad { NSString*text"两块钱,你买不了吃亏,两…

第五章 爬虫小程序-实例43-获取网页内容

1、准备工作 用Python编写的访问网页的程序中&#xff0c;有很多是调用 requests 库模块中的函数来进行操作&#xff0c;这个库模块把网页请求和操作等多项功能进行了高度封装&#xff0c;使其可以轻而易举完成浏览器的许多操作。 requests库是第三方模块&#xff0c;需要进行…

ASEMI-A7二极管可用什么代替,M7二极管正负极判断

编辑-Z 在电子设备的世界中&#xff0c;二极管是最常见的组件之一。它们在各种设备中发挥着重要的作用&#xff0c;包括电源适配器、电源供应器、电池充电器等。在这篇文章中&#xff0c;我们将探讨A7二极管可用什么代替&#xff0c;以及M7二极管正负极判断。 首先&#xff0c…

按计算机应用领域分类,按计算机用途分类

语音内容&#xff1a; 大家好&#xff0c;我是时间财富网智能客服时间君&#xff0c;上述问题将由我为大家进行解答。 计算机用途分类有很多类&#xff0c;常见的计算机用途分类的有&#xff1a; 1、数值计算。计算机广泛地应用于科学和工程技术方面的计算&#xff0c;这是计算…

旧电脑千万不要扔掉!它的剩余价值多得超乎想象!

相信很多人家里都会有闲置的旧电脑&#xff0c;没法用&#xff0c;扔了又可惜。 电脑硬件更新换代很快&#xff0c;一般电脑用三五年之后配置就不行了。大部分用户会直接卖掉&#xff0c;或者闲置在一边吃灰。既然是旧电脑&#xff0c;配置肯定不太高&#xff0c;很多游戏可能…

计算机网卡作用,一台电脑使用两张网卡的用途是什么

一台电脑使用两张网卡的用途是什么 双硬盘、双显卡、双声卡、双网卡大家都听得比较多&#xff0c;但实际使用的时候&#xff0c;它们有作用吗&#xff1f;今天广州电脑维修就“一台电脑使用两张网卡的用途是什么”的这个话题进行简单讨论。 双网卡作用是什么&#xff1f;什么用…

电脑android文件夹打开方式,电脑打开apk文件的方法步骤详解

apk文件是可以安装到手机上面的程序&#xff0c;在安卓手机上只要用文件管理器打开这个文件就可以开始安装了。在这里主要说一下在电脑上怎么打开apk文件&#xff0c;提取apk文件的资源。下面是学习小编给大家整理的有关介绍电脑打开apk文件的技巧&#xff0c;希望对大家有帮助…