js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效

最新推荐文章于 2022-12-13 13:13:24 发布

Ya_Wen

最新推荐文章于 2022-12-13 13:13:24 发布

阅读量1.6w

点赞数 11

分类专栏： jQuery and javascript

本文链接：https://blog.csdn.net/gl0ry/article/details/58263171

版权

js实现简单的小球与边框碰撞反弹改变运动方向及颜色，并且继续运动的特效

（代码可以直接复制使用，只需要把body中的div的id换成对应的就行，css中可以设置小球的大小和初始位置，修改小球大小之后需要在js里把现在的80改成小球的大小值）

最终实现效果图：

这里写图片描述

思路：首先先实现一个小球的运动和撞边框反弹效果，并且改变其颜色，效果如下图：

这里写图片描述

主要实现方法：

1.小球定位，运动靠改变它的position上下左右值；

2.获取浏览器的宽高，由此设置小球运动的最大范围，大于等于这个范围的时候就改变运动方向；

3.颜色的改变采用rgb方法，rgb的三个数值均用Math.random随机生成；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运动的小球</title>
    <style>
        <!--单个小球的样式-->
        .ball{
            width:80px;
            height:80px;
            background: red;
            border-radius: 50%;
            position:absolute;
            top:0;
            left:0;
        }