JS实现跟随鼠标闪烁转动色块的方法

  本文实例讲述了JS实现跟随鼠标闪烁转动色块的方法。分享给大家供大家参考。具体实现方法如下:

  

复制代码 代码如下:
<html>

  <head>

  <title>JS跟随鼠标闪烁转动的色块</title>

  </head>

  <body>

  <script language="JavaScript">

  <!--

  if (document.all){

  colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')

  amount=colours.length;

  YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;

  document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');

  for (i=0; i < amount; i++)

  document.write('<div id="iestars" style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier New;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>');

  document.write('</div></div>');

  ini=1;

  gstep=1;

  function iMouse(){

  my=event.y;mx=event.x;

  }

  document.onmousemove=iMouse

  function dim(){

  ini-=gstep;

  dt=setTimeout('dim()',10);

  if (ini < 2){

  clearTimeout(dt);

  glow();

  }

  }

  function glow(){

  ini+=gstep;

  gt=setTimeout('glow()',10);

  if (ini > 14){

  clearTimeout(gt);

  dim();

  }

  }

  function stars(){

  ie.style.top=document.body.scrollTop;

  for (i=0; i < amount; i++)

  {

  var layer=iestars[i].style;

  layer.filter='glow(color='+colours[i]+', strength='+ini+')';

  layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);

  layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);

  }

  currStep+=step;

  }

  function delay(){

  Ydelay = YgetDelay+=(my-YgetDelay)*1/20;

  Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;

  stars();

  setTimeout('delay()',10);

  }

  delay();

  glow();

  }

  //-->

  </script>

  </body>

  </html>

  希望本文所述对大家的javascript程序设计有所帮助。