JavaScript的缓冲运动和缓冲菜单案例------JavaScript学习之路17

本文链接：https://blog.csdn.net/dragoned_123/article/details/107518059

文章目录

缓冲运动
- 效果
- 完整源码
缓冲菜单
- 效果
- 完整源码

缓冲运动

缓冲运动类似汽车的刹车，在刹车前速度是最大的，刹车后速度随着距离的减少而减少，达到缓冲的效果

实现方法很简单，就是物体运动距离目标的位置等于物体的速度，一般调速数值为8效果最好

speed = (target-postion)/调速数值

postion = postion+speed

效果

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>缓冲运动</title>
    <style>
        body{
            position:relative;
            top: 150px;
            left: 150px;
            width: 800px;
            font-size: 24px;
        }
        #d1{
            width: 100px;
            height: 100px;
            text-align: center;
            text-transform: capitalize;
            background-color: #28a4c9;
            line-height: 100px;
            color: white;
            position: absolute;
        }
        body>hr{
            margin: 0px;
            position: absolute;
            top: 100px;
            width: inherit;
        }
        #d2{
            text-align: center;
            position: relative;
            top: 100px;
        }
        #d2>button{
            font-size: 24px;
            background-color: #b32ad2;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="d1">car</div>
<hr>
<div id="d2">
    <button>开始运动</button>
</div>
<script>
    var bt = document.getElementById("d2");
    var b = bt.getElementsByTagName("button");
    var car = document.getElementById("d1");
    var timer = null;
    var target = 800;
    b[0].onclick = function (ev) {
        clearInterval(timer);//清除上一次的点击事件的时间
        timer = setInterval(function () {//设置周期回调函数
            var speed = (target - car.offsetWidth - car.offsetLeft)/8;//控制速度不过大
            if(speed<1){//控制最后不足1px的运动速度的时候以1px的速度达到终点，
                speed = Math.ceil(speed);
            }
            car.style.left = car.offsetLeft + speed + "px";//控制car的运动位置
            console.log(car.offsetLeft+","+Math.ceil(speed));//在控制台时刻看到物体的位置和速度
        },30);
    }
</script>
</body>
</html>

缓冲菜单

主要是通过前面的缓冲运动思想，先计算滑动的距离和相对窗口的距离来得到目的距离，在通过缓冲运动的流程对相应的元素进行top值的改变。在结合滑动事件，改变窗口大小事件，循环调用缓冲菜单函数达到效果。

效果

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>缓冲菜单</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            height: 1200px;
        }
        #d1{
            width: 80px;
            height: 100px;
            background-color: #28a4c9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="d1">菜单</div>
<script>
    let d1 = document.getElementById("d1");
    let timer = null;
    moveside();
    window.onscroll = function () {//当页面滑动的时候触发
        moveside();
    }
    window.onresize = function () {//当页面的大小发生变化时触发
        moveside();
    }
    function moveside() {
        clearInterval(timer);
        let scroltop = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动的距离
        let windowheight = document.documentElement.clientHeight || document.body.clientHeight;//获取当前浏览器窗口大小
        let target = parseInt(scroltop + (windowheight - d1.offsetWidth)/2);//获取目标的位置

        timer = setInterval(function () {
            let speed = (target - d1.offsetTop)/10;//控制速度
            speed = speed>0 ? Math.floor(speed):Math.ceil(speed);//做一个判断取整，以最小的1px移动
            d1.style.top = d1.offsetTop + speed + "px";//设置位置
            console.log(d1.offsetTop+","+speed);//控制台输出位置
        },30);
    }
</script>
</body>
</html>