各种跑马灯代码 - ┣◇网站建设&Web语言 - ╋艺镇╋

各种跑马灯代码：

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

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

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

弹来弹去跑马灯!

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

源码粘贴框：
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>

２、跑的很快的跑马灯

跑的很快跑马灯!　

只要在<marquee>标签内加上“scrollamount=30”参数即可。

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

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

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

源码粘贴框：
<marquee width=90%>
<a href=http://www.22.tc/　target=_blank>带有超链接的跑马灯!点我试试？</a>
<a href=http://www.22.tc/　target=_blank>还有一条呢!点我试试？</a>
</marquee>

以上几个例子都是<marquee>标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，<marquee>标签只被IE所支持，使用Netscape浏览器是看不到的噢。

参数用法介绍
behavior=scroll, slide, alternate 跑马方式：循环绕行，只跑一次就停住，来回往复运动
direction=left,right ,up,down 跑马方向：从左向右，从右向左
loop=100 跑马次数：循环100次，如不写默认为一直循环
width=100%,height=200 跑马范围：宽为100%，高为200像素
scrollamount=20 跑马速度：数越大越快
scrolldelay=500 跑马延时：毫秒数，利用它可实现跃进式滚动
hspace=20，vspace=20 跑马区域与其它区域间的空白大小
bgcolor=#00FFCC 跑马区域的背景颜色
id=gonggao 指定Id
onmouseout=gonggao.start() 鼠标离开时重新滚动
onmouseover=gonggao.stop() 鼠标放上去时停止

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

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

　　源码粘贴框：

1）将下面代码放在<body>标签下：

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" >跑马灯大全(一)</a>
<a href="/pc/index.htm" >电脑交互教程</a>
<a href="pmjq00.htm" >网页制作技巧技巧</a>

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

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

主题：各种跑马灯代码