【示例1】实现有重力的弹跳运动效果

1.效果实现思路

要实现有重力的弹跳运动效果，需要分为以下几个步骤：

定义小球元素
设置小球的初始位置和速度
定义重力加速度
实现小球的弹跳运动
给小球添加事件

2.代码实现

下面是完整的代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>有重力的弹跳运动效果</title>
    <style type="text/css">
        .ball {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="ball"></div>
    <script type="text/javascript">
        // 获取小球元素
        var ball = document.querySelector('.ball');

        // 设置小球的初始位置和速度
        var x = 200;
        var y = 0;
        var vx = 0;
        var vy = 0;

        // 定义重力加速度
        var g = 1;

        // 实现小球的弹跳运动
        function animate() {
            // 更新小球的速度和位置
            vy += g;
            x += vx;
            y += vy;

            // 判断小球是否触底
            if (y + ball.clientHeight > document.documentElement.clientHeight) {
                // 反弹
                y = document.documentElement.clientHeight - ball.clientHeight;
                vy = -vy * 0.8;
            }

            // 更新小球的位置
            ball.style.left = x + 'px';
            ball.style.top = y + 'px';

            requestAnimationFrame(animate);
        }

        // 开始动画
        animate();
    </script>
</body>
</html>

3.代码解析

代码中通过document.querySelector('.ball')获取到小球元素，然后通过设置x和y变量的值定义小球的初始位置，设置vx和vy变量的值定义小球的初始速度。在animate()方法中，使用requestAnimationFrame()方法实现小球的动画效果，并在每一帧更新小球的位置和速度。当小球触底时，执行反弹操作，即将y的值设为窗口高度减去小球高度，同时更新vy的值为其相反数的0.8倍。最后，通过将x和y值赋给小球元素的style属性，来更新小球的位置。

【示例2】实现拖拽运动效果

1.效果实现思路

要实现拖拽运动效果，需要分为以下几个步骤：

定义拖动元素的初始状态
给拖动元素添加mousedown和mousemove事件
在mousedown事件中，记录鼠标的位置，并标记元素为可移动状态
在mousemove事件中，计算元素的相对偏移量，并将元素移动到对应的位置
在mouseup事件中，标记元素为不可移动状态

2.代码实现

下面是完整的代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拖拽运动效果</title>
    <style type="text/css">
        .box {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script type="text/javascript">
        // 获取拖动元素
        var box = document.querySelector('.box');

        // 定义拖动元素的初始状态
        var isDragging = false;
        var mouseX = 0;
        var mouseY = 0;
        var boxX = 0;
        var boxY = 0;

        // 给拖动元素添加事件
        box.addEventListener('mousedown', function (event) {
            // 记录鼠标的位置，并标记元素为可移动状态
            mouseX = event.clientX;
            mouseY = event.clientY;
            boxX = box.offsetLeft;
            boxY = box.offsetTop;
            isDragging = true;
        });

        document.addEventListener('mousemove', function (event) {
            if (isDragging) {
                // 计算元素的相对偏移量，并将元素移动到对应的位置
                var deltaX = event.clientX - mouseX;
                var deltaY = event.clientY - mouseY;
                box.style.left = boxX + deltaX + 'px';
                box.style.top = boxY + deltaY + 'px';
            }
        });

        document.addEventListener('mouseup', function () {
            // 标记元素为不可移动状态
            isDragging = false;
        });
    </script>
</body>
</html>

3.代码解析

代码中通过document.querySelector('.box')获取到拖动元素，然后定义isDragging、mouseX、mouseY、boxX和boxY等变量，用于记录元素的状态和位置。在mousedown事件中，记录鼠标的位置，并将元素标记为可移动状态；在mousemove事件中，计算元素的相对偏移量，并将元素移动到对应的位置；在mouseup事件中，将元素标记为不可移动状态。最后，通过设置元素的cursor属性为move，来显示鼠标拖动的图标。