js页面实现小球在div固定容器中上下左右弹射

最新推荐文章于 2021-08-05 16:27:26 发布

codingCoge

最新推荐文章于 2021-08-05 16:27:26 发布

阅读量996

点赞数

分类专栏：普通知识网页前端

本文链接：https://blog.csdn.net/qq_38409944/article/details/83030163

版权

网页前端同时被 2 个专栏收录

58 篇文章 2 订阅

订阅专栏

普通知识

50 篇文章 0 订阅

订阅专栏

代码不难，也是挺简单的，主要考虑边界问题。网页我已经挂到服务器了，可以看看效果是否是你想要的：

http://codingcoge.cn:8080/ball/ball.html

代码：也可以通过F12来查看js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    var positionX = 0;//初始横坐标
    var positionY = 0;//初始纵坐标
    var directX = 1;//移动时候的方向 1代表正方向右
    var derectY = 1;//移动时候的方向 1代表正方向上
    function ballMove(){
        if(positionX+div2.offsetWidth>=div1.offsetWidth||positionX<0){//防止飞出div
            directX=-directX;//当要飞出div的时候 调整方向为反方向
        }
        if(positionY+div2.offsetHeight>=div1.offsetHeight||positionY<0){
            derectY=-derectY;
        }
        positionX+=2*directX;
        positionY+=2*derectY;
        div2.style.left = positionX+'px';
        div2.style.top = positionY+'px';

    }
    setInterval("ballMove()",10); //定时作用
</script>
<body>
<div id="div1" style="width: 500px;height: 400px;top: 100px;border: 1px solid cornsilk;position: absolute">
    <div id="div2" style="position: absolute;left: 0px;top: 0px;"><img style="height: 50px;top: 50px;" src="image/ball.jpg" /></div>
</div>
</body>
</html>