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

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




posted @ 2012-02-22 17:48  java简单例子  阅读(308)  评论(0编辑  收藏  举报