24.跑马灯大全(二)-开店乐

开店乐

开店乐电子商务研究 KaiDianLe.Com

网站地图 : 一二三四五六七八九十

主页

24.跑马灯大全(二)

| 回首页 | 网站地图 | 网络技术 >> 网页特效

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

　　1、状态栏中的跑马灯【文章来源：开店乐KaiDianLe.Com】

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

　　源码粘贴框：

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()语句即可。

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

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

跑马灯大全(一)　　　　电脑交互教程　　　　网页制作技巧技巧

　　源码粘贴框：

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语句。

【日期：2006-10-9】【作者：网上开店】【转载自：http://www.kaidianle.com】