用javascript实现网站来回撞动的广告图片
fmms
13年前
这个程序实现的效果就是一张div广告图片在网页中没撞到边就会自动反弹，就想物理学中的光线一样，哎呀意思差不多吧。
首先跟大家说下大概的思路：控制div的坐标起始点，将两个坐标的值给予不同程度的增长，当图片撞到上下左右每个边缘的时候
将坐标X或者坐标Y的增长变为负数后继续累加（整数累加增大，负数累加则就是减少），最后通过定时器来间隔运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网站来回撞动的广告图片</title> <!-- 1.现有一个div图片，div就是我们控制的图片起始点为（0，0） 2.设定横向和纵向的速度 3.控制div的移动 1》广告div是否到达边界 2》如果到达以后，我们设置按照这个速度反向移动 --> <style> div{ position:absolute; } </style> </head> <body> <div id="divImg"> <img src="./haha.jpg" width="130" height="180"> </div> <script language="javascript" type="text/javascript"> //获取图片div对象 var img1=document.getElementById("divImg"); //设置div起始点的坐标(0,0）左上角坐标 var x=0,y=0; //设置图片的运行的速度 var xSpeed=2,ySpeed=1; //将有效的屏幕高度和宽度都减去div的宽和高，就是图片运行空间 var w=window.screen.availWidth-130,h=window.screen.availHeight-180; function floatimg(){ //比较图片是否到达边界 //如果到达边界后，控制图片改变方向， //当图片碰到底边缘的时候应该往上走，也就y轴达到最大值，应该缩小了（就是符合y>h这个条件），这时y的增长数xSpeed变为负数 //当图片碰到右边缘的时候这时候该往左走，也就是x达到最大值，该缩小了。（就是符合x>w），这时y的增长数xSpeed变为负数 //当图片碰到上边缘的时候图片的该往往下走了，也就是y的值为零的时候，增长数再次变为负数后将增大（符合y<0） //当图片碰到左边的时候，图片该往右走，也就是x的值为零的时候，增长数变为负数后将增大（符合x<0） if(x>w||x<0) xSpeed=-xSpeed; if(y>h||y<0) ySpeed=-ySpeed; //如果没到达边界，设置图片的左上角的坐标 //设置坐标值， 起始坐标+速度 x+=xSpeed; y+=ySpeed; //alert(x+","+y); //将每次改变后的图片的坐标从新赋值 img1.style.left=x+"px"; img1.style.top=y+"px"; //js定时器：setTimeout(funhander,time)的作用是在过time毫秒后，执行一次句柄funhander指向的方法。 setTimeout("floatimg()",50); } floatimg(); </script> </body> </html></span>