5-23.htm

JavaScript网页特效实例大全

<script language="JavaScript">
var speed=25,divTop=0,divLeft=0,angle=0,ypos=0,xpos=0,amount=13;<!--定义变量-->
if (document.layers){<!--如果是netscape浏览器-->
for (i = 0; i < amount; i++)<!--依次对每一个流星进行处理-->
{document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/3+' height='+i/3+' bgcolor=#000000></layer>');}<!--画每一个流星所在的层-->
window.captureEvents(Event.MOUSEMOVE);<!--映射鼠标移动事件到函数-->
function nsMouse(evnt){<!--鼠标响应函数-->
xpos=evnt.pageX;ypos=evnt.pageY;<!--获取鼠标移动的量-->
}
window.onMouseMove = nsMouse;<!--设置鼠标移动响应函数-->
}
else if (document.all){<!--如果是ie浏览器-->
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < amount; i++)<!--依次对每一个流星进行处理-->
{document.write('<div id=k style="position:absolute;top:0px;left:0px;width:'+i/3+';height:'+i/3+';background:#000000;font-size:'+i/3+'"></div>')}
document.write('</div></div>');<!--画每一个流星所在的层-->
<!--鼠标响应函数-->
function iMouse(){xpos=event.x;ypos=document.body.scrollTop+event.y}<!--获取鼠标移动的量-->
document.onmousemove = iMouse;<!--设置鼠标移动响应函数-->
}
function getAngle(){<!--获得角度-->
Y = ypos - divTop;X = xpos - divLeft;angle = Math.round(Math.atan2(Y,X) * 180/Math.PI);<!--计算移动的路径-->
if (angle < 0)angle += 360;<!--如果角度小于0，则加入360度-->
}
function bomb(){
if (document.layers){<!--如果是netscape浏览器-->
Yscroll=window.pageYOffset;<!--获得当前窗口的纵坐标-->
ybase=Math.round(Math.random()*window.innerHeight);<!--随机生成y值-->
xbase=Math.round(Math.random()*window.innerWidth);<!--随机生成x值-->
yybase=window.innerHeight-10;xxbase=window.innerWidth-10;<!--获得当前窗口的高度、宽度-->
}
else if (document.all){<!--如果是ie浏览器--><!--获得当前窗口的横坐标-->
Yscroll=document.body.scrollTop;
ybase=Math.round(Math.random()*window.document.body.offsetHeight);<!--随机生成y值-->
xbase=Math.round(Math.random()*window.document.body.offsetWidth);<!--随机生成x值-->
xxbase=window.document.body.offsetWidth-10;yybase=window.document.body.offsetHeight-10;<!--获得当前窗口的高度、宽度-->
}
if ((xbase > 10 && xbase < xxbase) && (ybase > 10 && ybase < yybase))<!--生成下一个点-->
bomb();

else
 {
  if ((divLeft > xpos-speed/1.5) && (divLeft < xpos+speed/1.5) && (divTop >= ypos-speed/1.5) && (divTop <= ypos+speed/1.5))<!--判断流星的位置-->
  {divTop=ybase+Yscroll;divLeft=xbase}
y = Math.round(speed*Math.sin(angle*Math.PI/180));x = Math.round(speed*Math.cos(angle*Math.PI/180));<!--根据运行轨迹获得坐标值-->
divTop+=y;divLeft+=x;<!--更新横、纵坐标-->
getAngle();<!--调用getangle函数-->
T=setTimeout('bomb()',20);<!--周期性调用settimeout函数-->
 }
}

function Split(){
Clrs=new Array('ff0000','00ff00','0000ff')<!--定义三种颜色-->
var ntscp=document.layers,msie=document.all;<!--定义变量用来区分ie和netscape-->

if (document.layers){<!--如果是netscape浏览器-->
for (i = 0; i < amount; i++)
{
 if (i < amount-1)<!--对前面的amount－1个流星--> 
 {ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left} 
else  <!--对于最后一个流星-->
 {ntscp['nsa'+i].top=divTop;ntscp['nsa'+i].left=divLeft}
}
}
else if (document.all){<!--如果是ie浏览器-->
for (i = 0; i <  amount; i++)
{
 if (i < amount-1) <!--对前面的amount－1个流星-->
 {msie.k[i].style.top=msie.k[i+1].style.top;msie.k[i].style.left=msie.k[i+1].style.left} <!--依次显示-->
  else <!--对于最后一个流星-->
  {msie.k[i].style.top=divTop;msie.k[i].style.left=divLeft}<!--显示最后一个-->
}
}
for (i=0; i < amount-1; i++)<!--依次对每一个流星进行处理-->
  {
   for (n=0; n < Clrs.length; n++)
   {var x=Math.round(Math.random()*n)}<!--随机产生颜色-->
   if (document.layers){ntscp['nsa'+i].bgColor=Clrs[x]}<!--netscape中显示颜色-->
   else if (document.all){msie.k[i].style.background=Clrs[x]}<!--ie中显示颜色-->
  }
setTimeout("Split()",2);<!--循环调用split函数-->
}
function StArT(){
bomb();<!--调用bomb函数-->
Split()<!--调用split函数-->
}
window.onload=StArT;<!--直接调用start函数-->
</script>




<!--本例程实现了跟随鼠标的流星的效果-->
<!--对固定轨迹的坐标的实现-->
<!--颜色的随机变化-->
<!--动画效果的具体实现方法-->