用js实现图片（小球）在屏幕上上下左右移动

<html>

<head>

    <title>Document</title>

</head>

<body style="background-image:URL('./b1.png')">

<div id="sundiv" style="position:absolute">

<img src="太阳.png"/>

</div>

<script language="javascript" type="text/javascript">

            //定义全局变量

            directX=1;//x轴的方向

            directY=1;//y轴的方向

            //上面两个全局变量似乎没有生效

            sunX=0;//小太阳的坐标x

            sunY=0;//小太阳的坐标y

        function sunMove(){

            sunX+=directX;

            sunY+=directY;

            //这条语句无法执行，竟然是因为<!doctype html>存在

            //修改div的left top

            sundiv.style.top=sunY+"px";

            //window.alert(sunY);

            //window.alert(sundiv.style.top);

            sundiv.style.left=sunX+"px";

            //判断什么时候，转变方法

            //x方法（offsetWidth可以返回当前这个对象的实际宽度）

            if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){

                //window.alert(directX);

                //directX-=directX;

                directX=-directX;

            }

            //判断y

            if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){

                //directY-=directY;

                directY=-directY;

                //window.alert(directY);

            }

        }

        setInterval("sunMove()",3);

        //这里写的是setInterval("sunMove()",100);，而不是

        //setInterval("sunMove",100);

    </script>

</body>

</html>

<!-- 运行上述代码时，出现一个巨坑，浏览器没有更新代码，害我刷新对运行结果根本影响。还有<!DOCTYPE html>这句话使代码无法正确运行 -->
巴特西

用js实现图片（小球）在屏幕上上下左右移动

最新文章

热门文章
