- 跑马灯js代码集合
效果一
<script language="JavaScript" type="text/javascript">
<!--
var bannerAD=new Array();
var adNum=0;bannerAD[0]='ad_1.jpg';
bannerAD[1]='ad_2.jpg';
bannerAD[2]='ad_3.jpg';
bannerAD[3]='ad_4.jpg';
bannerAD[4]='ad_5.jpg';var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++) {
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];}
function setTransition() {
if (document.all) {
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}function playTransition() {
if (document.all) {
bannerADrotator.filters.revealTrans.play();
}
}function nextAd() {
if (adNum<bannerAD.length-1) {
adNum++;
} else {
adNum=0;
}
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 5000);
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
nextAd()
</script>效果二-->
</style>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<LINK href="css/lanrentuku.css" type=text/css rel=stylesheet>
<SCRIPT src="js/jquery-1.4.2.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/lanrentuku.js" type=text/javascript></SCRIPT>
</head>
<body>
<table width="1003" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="944" align="center" valign="top">
<!--#include file="head.asp"-->
<table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="232"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="294" background="images/index_03.jpg"><table width="1000" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="28" height="288"> </td>
<td width="942" valign="top"><div id="imgPlay">
<ul class="imgs" id="actor">
<li><img src="ad/ab1.jpg" /></li>
<li><img src="ad/ab2.jpg" /></li>
<li><img src="ad/ab3.jpg" /></li>
</ul>
<div class="num">
</div>
<div class="num" id="numInner"></div>
</table>
效果三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.xx.tc/ target=_blank>带有超链接的跑马灯!点我试试？</a>
<a href=http://www.xx.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>标签下：
<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>
实现步骤：
(1)先在<body>标签下面插入一段JavaScript代码；
(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。效果四
<html>
<head>
<script language="javascript">
function moveIt() {
if(document.layers) {
document.redball.left += 5;
if (document.redball.left>300) {
document.redball.left = 0;
}
} else if (document.all) {
redball.style.left = parseInt(redball.style.left) + 5;
if (parseInt(redball.style.left) > 1024) {
redball.style.left =-400;
}
}
if ((document.layers) || (document.all)) {
setTimeout('moveIt()', 50);
}}
</script>
<title>图片跑马灯代码</title>
</head>
<body onload="moveIt()" background=bg.gif>
<div id="redball" style="position:relative; left:0px; width:350px; height:45px;">
<br><br><br>
<p align="left"> <img src="/jscss/demoimg/wall_s8.jpg" alt="移动的广告条" WIDTH="140" HEIGHT="165"><br>
</p>
</div>
<div align="center"><br>
<br>
<font size=20 color=#9999CC face=汉鼎繁特楷> <font color="#0000FF">这个效果不错吧！</font></font>
</div>
</body>
</html>效果五
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)首先将JavaScript代码复制到<head>与</head>之间，这段代码中包含了scroll()函数，它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容，你也可以显示更多条的信息，不过代码中i的值应等于信息的条数，也就是等于mes[]数组的维数；
(2)然后在<body>标签中加入onload()语句即可。跑马灯字幕代码
.建立第一个滚动字幕。代码：
<marquee scrollAmount=2 width=300>我喜欢网页设计</marquee>
效果如：我喜欢网页设计
2.各参数详解：
a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)3.实例：
a)如何给滚动字幕加超链接？ 这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果，代码是<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>，点击中央电视台就可以进入 了：
中央电视台
b)如何制作当鼠标停留在文字上，文字停止滚动？
代码如：
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如：
文字内容
c)交替效果。代码如：
<marquee scrollAmount=2 width=99 behavior=alternate>文字内容</marquee>
效果如：
文字内容
d)多行文本向上滚动。代码如：
<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊！<br>·空气好清新啊<br>·今天过得好吗？<p>·<a href=http://www.cctv.com>中央电视台</a></marquee>
效果如：
·早晨好啊！
·空气好清新啊
·今天过得好吗？
·中央电视台
·注意：如果你的网页经过了FrontPage编辑，保存之后，只能滚动一行，这时候你发现你原来的代码顺序已经变了，My god！解决的办法是，找出原来的代码，把它嵌入到javascript的document.write中即可，上述代码写为：
<script>document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊！<br>·空气好清新啊<br>·今天过得好吗？？<p>·< a href=http://www.cctv.com>中央电视台</a></marquee>')< /script>e)改变滚动字幕的颜色？可以用样式表来控制。如下效果，代码是 <marquee scrollAmount=2 width=300><a style=color:CC6600>我喜欢网页设计！</a></marquee>
深圳网站建设|深圳网站设计|企业网站建设|华强网站改版|域名空间租赁|企业邮局|华强北特价网站建设|深圳建网站|深圳网站建设|企业网站设计|外贸网站设计|- 上一篇: 为什么做网站怎么做网站也是门学问 下一篇: 坑爹的抽考 差学生竟然不让上课，老师给放假了