6-4.htm

JavaScript网页特效实例大全

<script LANGUAGE="JavaScript">






function checkbrOK()
{

  
   <!--赋值给mie变量-->
    mie=true;
 }

var vmin=2;<!--声明变量，速度的最小值-->
var vmax=5;<!--声明变量，速度的最大值-->
var vr=0.02;<!--声明变量，速度随机变化的幅度-->
var timer1;<!--声明变量，定时器-->

function Chip(chipname,width,height)
{this.named=chipname;<!--返回chipname-->
 this.vx=vmin+vmax*Math.random();<!--返回对象的横向速度-->
 this.vy=vmin+vmax*Math.random();<!--返回对象的纵向速度-->
 this.w=width;<!--返回对象的宽度-->
 this.h=height;<!--返回对象的高度-->
 this.xx=0;<!--返回对象的起始横坐标-->
 this.yy=0;<!--返回对象的起始纵座标-->
 this.timer1=null;<!--返回对象的定时器为空-->
}

function movechip(chipname)
{

  {eval("chip="+chipname);<!--将chipname赋值给chip-->
   <!--获取当前窗口的横坐标、纵坐标、以及宽度和高度-->
    {pageX=window.document.body.scrollLeft;
     pageW=window.document.body.offsetWidth-22;
     pageY=window.document.body.scrollTop;
     pageH=window.document.body.offsetHeight-34;
    }

   chip.xx=chip.xx+chip.vx;<!--图片横坐标增加一个步长-->
   chip.yy=chip.yy+chip.vy;<!--图片纵坐标增加一个步长-->

   chip.vx+=vr*(Math.random()-0.5);<!--图片横坐标横向速度随机变化-->
   chip.vy+=vr*(Math.random()-0.5);<!--图片纵坐标纵向速度随机变化-->
   

   <!--如果图片的左侧边界在窗口左侧边界的左边，将窗口的左侧边界赋值给图片的左侧边界-->
   if(chip.xx<=pageX)
     {chip.xx=pageX;
     <!--随机产生横向速度-->
      chip.vx=vmin+vmax*Math.random();
     }
   <!--如果图片的右侧边界在窗口右侧边界的右边，将窗口的右侧边界赋值给图片的右侧边界-->
   if(chip.xx>=pageX+pageW-chip.w)
     {chip.xx=pageX+pageW-chip.w;
     <!--随机产生横向速度-->
      chip.vx=-vmin-vmax*Math.random();
     }
     <!--如果图片的上边界在窗口上边界的上边，将窗口的上边界赋值给图片的上边界-->
   if(chip.yy<=pageY)
     {chip.yy=pageY;
     <!--随机产生横向速度-->
      chip.vy=vmin+vmax*Math.random();
     }
     <!--如果图片的下边界在窗口下边界的下边，将窗口的下边界赋值给图片的下边界-->

   if(chip.yy>=pageY+pageH-chip.h)
     {chip.yy=pageY+pageH-chip.h;
     <!--随机产生横向速度-->
      chip.vy=-vmin-vmax*Math.random();
     }

   
      {
      <!--更新图片的横坐标、纵坐标-->
      eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);
       eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);
      }
      <!--设定定时器，每0.05秒调用一次movechip函数-->
   chip.timer1=setTimeout("movechip('"+chip.named+"')",50);
  }
}





var chip1;<!--声明变量-->

function pagestart()
{
<!--调用checkbrOK()函数-->
checkbrOK();
<!--调用Chip()函数，chip1的宽为117，高为75-->
 chip1=new Chip("chip1",117,75);
 <!--调用movechip()函数-->
 
   { movechip("chip1");
    }
}
</script>
<DIV id=chip1
style="height: 105; position: absolute; visibility: visible; width: 140; left: 180; top: 157">

<IMG border=0 class=bd  src="bike.jpg"></DIV> 
<SCRIPT event=onload for=window language=JavaScript>
pagestart();
</SCRIPT>

<!--本案例实现了走动的图片-->
<!--对不同的浏览器分别编写了相应的代码-->
<!--图片走动的速度是随机变化的，遇到了窗口的边界可以进行反弹-->
<!--调用了settimeout()函数完成了动画设计-->