现在的位置: 首页 > 综合 > 正文

跑马灯效果的两种实现

2013年08月31日 ⁄ 综合 ⁄ 共 2598字 ⁄ 字号 评论关闭

一/ JS 实现:

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[i].substring(0, place);
if (place >= Mes[i].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 onload="scroll();">

--------------------------------------------------------------------------------------

二:超链接的跑马灯式提示信息

1.将下面代码放在<body>标签下:

<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.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 (document.all)
document.all.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>

三/ 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 跑马区域的背景颜色

  你已经看到,尽管<marquee>参数不少,单毕竟不能实现复杂的和自定义的特殊跑马灯效果,而且还有浏览器限制,所以我们更多情况下会采用JavaScript来实现跑马灯,那就是我们下一个技巧的内容。

抱歉!评论已关闭.