小太阳的滚动

最新推荐文章于 2023-10-10 10:06:33 发布

star...

最新推荐文章于 2023-10-10 10:06:33 发布

阅读量415

点赞数 1

分类专栏： javascript 文章标签： html js css

本文链接：https://blog.csdn.net/star0311/article/details/52516926

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html文件，碰到边缘自动弹回

<html>
<head>
<title>小太阳</title>
<script language="javaScript">
    //定义全局变量，两个方向
    directionX=1;//x轴的方向
    directionY=1;//y轴的方向
    sunX=0;//小太阳的坐标x
    sunY=0;//小太阳的坐标y
    speed=2;
function sunMove(){
    var sundiv=document.getElementById('sundiv');

    sunX+=directionX*speed;
    sunY+=directionY*speed;

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

    //x方法（offsetWidth可以返回，当前这个对象的实际宽度）
    if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){
        directionX=-directionX;
        }
        //判断y
        if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){
        directionY=-directionY;
        }
    }
    setInterval("sunMove()",10);
</script>
</head>
<body style="background-image:url('img/bizhi.jpg')">
<div id="sundiv" style="position:absolute;top:10px;left:10px;width:20px;">
<img src="img/sun.gif" style="width:80px;"/>
</div>
</body>
</html>

star...

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小太阳的滚动

html文件，碰到边缘自动弹回<html><head><title>小太阳</title><script language="javaScript"> //定义全局变量，两个方向 directionX=1;//x轴的方向 directionY=1;//y轴的方向 sunX=0;//小太阳的坐标x sunY=0;//小太阳的坐标y speed=2;
复制链接

扫一扫