用javascript实现网站来回撞动的广告图片

来源：互联网发布：单片机控制蜂鸣器发声编辑：程序博客网时间：2024/04/28 14:04

这个程序实现的效果就是一张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>


<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>