软件学堂

网游分类软件分类

到边界反弹的漂浮图片JS代码怎么写

2012-11-08 来源:网络

【实例名称】

到边界反弹的漂浮图片JS代码怎么写

【实例描述】

很多网站的图片广告是以漂浮的形式展现,当图片漂浮到边界时会被弹回,然后继续向反方向移动。本例学习如何实现图片的反弹。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>无标题页-学无忧(www.xue51.com)</title> <SCRIPT language=JavaScript> var brOK=false; var mie=false; var aver=parseInt(navigator.appVersion.substring(0,1)); var aname=navigator.appName; //检测浏览器类型 function checkbrOK() {   if(aname.indexOf("Internet Explorer")!=-1)    {if(aver>=4) brOK=navigator.javaEnabled();     mie=true;    }   if(aname.indexOf("Netscape")!=-1)     {if(aver>=4) brOK=navigator.javaEnabled();} } var vmin=2; var vmax=5; var vr=2; var timer1; function Chip(chipname,width,height) {this.named=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) {  if(brOK)   {eval("chip="+chipname);    if(!mie)     {pageX=window.pageXOffset;      pageW=window.innerWidth;      pageY=window.pageYOffset;      pageH=window.innerHeight;     }    else     {pageX=window.document.body.scrollLeft;      pageW=window.document.body.offsetWidth-8;      pageY=window.document.body.scrollTop;      pageH=window.document.body.offsetHeight;     }    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.vx>(vmax+vmin))  chip.vx=(vmax+vmin)*2-chip.vx;    if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;    if(chip.vy>(vmax+vmin))  chip.vy=(vmax+vmin)*2-chip.vy;    if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;    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();      }    if(!mie)       {eval('document.'+chip.named+'.top ='+chip.yy);        eval('document.'+chip.named+'.left='+chip.xx);       }    else {eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx); eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);       }    chip.timer1=setTimeout("movechip('"+chip.named+"')",100); //设置定时器   } } //终止图片的循环漂浮 function stopme(chipname) {   if(brOK)   {    eval("chip="+chipname);    if(chip.timer1!=null)     {clearTimeout(chip.timer1)}   } } var moveimg; function beginmove() {   checkbrOK();   moveimg=new Chip("moveimg",120,150);   if(brOK)    { movechip("moveimg");} } </SCRIPT>

需要在body中添加一个ID为“moveimg”的div,其中包含要漂浮的图片, 代码如下所示: </head> <body onload="beginmove()"> <p> <DIV id="moveimg" style="POSITION: absolute"> <img border="0" src="LOGO1.gif" width="100" height="100"></p> </body> </html>

【运行效果】

 到边界反弹的漂浮图片运行效果

【难点剖析】

本例的难点是随机移动的像素值和边界值的判断。在设置随机数时,本例使用了“Math.random()”,其中“Math”是JavaScript的常用计算对象,“random”用来生成一个随机数。页面边界值的获取是通过body的相关属性,如“scro11Left”是获取最左侧的坐标。

【源码下载】

为了JS代码的准确性,请点击:到边界反弹的漂浮图片JS代码 进行本实例源码下载 

上一篇:带关闭的对联广告JS代码怎么写
下一篇:Photoshop利用LAB模式为美女照片调色技巧

相关文章