网页跑马灯效果，<marquee></marquee>标签

最新推荐文章于 2024-01-31 21:56:38 发布

nicesa1

最新推荐文章于 2024-01-31 21:56:38 发布

阅读量8.4k

点赞数

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

滚动的文字

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

　　1、左右弹来弹去的跑马灯

弹来弹去跑马灯!

　　实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。

　　源码粘贴框：

<marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee>

　　２、跑的很快的跑马灯

跑的很快跑马灯! 　

　　只要在<marquee>标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。

　　３、带有超级链接的跑马灯

带超级链接的跑马灯!点我试试？　　　　　　　　　　还有一条呢!点我试试？　

　　实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯就可用来发布滚动新闻或是做站点导航了。

　　如果你想给跑马灯的文字加上颜色，换用不同的字体（默认是宋体，换体就要加代码），只要在文字前加上<FONT face=楷体_GB2312 color=#ff0000 size=3>就行了，你可在“face=”后边换上你喜欢的字体，在“color=”后边换上你喜欢的字颜色，在“size=”后边换上适合的字号，如果想让字体加粗，就再加上<STRONG>。

请看一下效果： 带超级链接的跑马灯!点我试试？ 　　　　　　还有一条呢!点我试试？

　　上面效果的代码码如下：

<marquee width=400 scrollamount=2> <a href=http://954872988.qzone.qq.com/><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来实现跑马灯。

较复杂的跑马灯

　　这里向你介绍几个用JavaScript实现的较复杂的跑马灯，你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。

　　1、状态栏中的跑马灯

　　在默认状态下浏览器的状态栏中显示的是链接指向信息，给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示，一定能取得很好的效果。

　　源码粘贴框：

1、将以下代码放在<head>与</head>之间： <script LANGUAGE="JavaScript"> <!-- Begin var Mes=new Array(); Mes[0]="洪恩在线欢迎你！ "; Mes[1]="感谢你关注电脑交互教程 "; Mes[2]="网页制作技巧　之　跑马灯大全 "; var place=1; var i=0; function scroll() { window.status=Mes.substring(0, place); if (place >= Mes.length) { if(i<2) { i++; place=1; window.setTimeout("scroll()",50); } else { i=0; place=1; window.setTimeout("scroll()",50); } } else { place++; window.setTimeout("scroll()",50); } } // End -－> </script> 2、在<body>标签内加入onload 语句： <body οnlοad="scroll();">

　　实现步骤:
(1)首先将JavaScript代码复制到<head>与</head>之间，这段代码中包含了scroll()函数，它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容，你也可以显示更多条的信息，不过代码中i的值应等于信息的条数，也就是等于 mes[]数组的维数；
(2)然后在<body>标签中加入onload()语句即可。

　　2、超链接的跑马灯式提示信息

　　把你的“老鼠”移到下面链接上试一试，有什么不同呢？原来弹出了一条跑马灯式的提示信息，这是怎么实现的呢，请接着看：

　　源码粘贴框：

1. 将下面代码放在<body>标签下： <script> if (!document.layers&&!docu****ll) event="test" function showtip2(current,e,text){ if (docu****ll&&document.readyState=="complete"){ docu****ll.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>' docu****ll.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10 docu****ll.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10 docu****ll.tooltip2.style.visibility="visible" } else if (document.layers){ document.tooltip2.document.nstip.document.write('<b>'+text+'</b>') document.tooltip2.document.nstip.document.close() document.tooltip2.document.nstip.left=0 currentscroll=setInterval("scrolltip()",100) document.tooltip2.left=e.pageX+10 document.tooltip2.top=e.pageY+10 document.tooltip2.visibility="show" } } function hidetip2(){ if (docu****ll) docu****ll.tooltip2.style.visibility="hidden" else if (document.layers){ clearInterval(currentscroll) document.tooltip2.visibility="hidden" } } function scrolltip(){ if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) document.tooltip2.document.nstip.left-=5 else document.tooltip2.document.nstip.left=150 } </script> 2.然后在要出现提示信息的链接中，添加onMouseover语句： <a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()">跑马灯大全(一)</a> <a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()">电脑交互教程</a> <a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()">网页制作技巧技巧</a>

　　实现步骤：
(1)先在<body>标签下面插入一段JavaScript代码；

　　(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

nicesa1

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
网页跑马灯效果，<marquee></marquee>标签

实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“滚动的文字”语句，它的效果如下所示：滚动的文字　　适当的运用标签的参数，可以表现出不同的效果，请看下面的几个例子：　　1、左右弹来弹去的跑马灯弹来弹去跑马灯!　　实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示
复制链接

扫一扫