web js笔记

最新推荐文章于 2024-07-08 12:24:36 发布

lkhyyds

最新推荐文章于 2024-07-08 12:24:36 发布

阅读量140

点赞数

文章标签：前端 javascript servlet

本文链接：https://blog.csdn.net/lkhyyds/article/details/126881206

版权

1.平滑运动

需求：点击起飞盒子开始移动移动到1000px 盒子停止

<body>
    <button>起飞</button>
    <div></div>
    <script>
        /* 
            需求：点击起飞按钮  红色盒子开始移动  移动到1000px的位置开始停止
        */
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        //添加点击事件
        btn.onclick = function () {
           var timer =  setInterval(function () {
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left")) + 10;
                if(current==1000){
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + "px";
            }, 50)

        }
    </script>

2.缓冲动画基础功能

需求：目标值是500和目标值是1000 所花费的时间是一样的

<body>
    <button>起飞</button>
    <div></div>
    <script>
        /* 
            需求：目标值是500和目标值是1000 所花费的时间是一样的
            速速 = 路程 / 时间
        */
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        //添加点击事件
        btn.onclick = function () {
            var timer = setInterval(function () {
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left"));
                var speed = (500 - current) / 10;// speed  速度/步长
                console.log(current);//永远达不到目标值
                if (current == 500) {
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + speed + "px";
            }, 50)

        }
    </script>

问题1:永远到不了目标值
- 原因：当current是491的时候 speed=0.9 left值=parseInt(491.9px) =491 所以current的值始终在491
- 解决方法：让speed向上取整 Math.ceil

<body>
    <button>起飞</button>
    <div></div>
    <p></p>
    <script>
        /* 
             问题1：永远达不到目标值
             原因：当current是491的时候 speed=0.9 left值=parseInt(491.9px) =491 所以current的值始终在491
             解决方法：让speed向上取整  Math.ceil
        */
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        //添加点击事件
        btn.onclick = function () {
            var timer = setInterval(function () {
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left"));
                var speed = (500 - current) / 10; // speed  速度/步长
                speed = Math.ceil(speed);
                console.log(speed);
                if (current == 500) {
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + speed + "px";
            }, 50)

        }
    </script>
</body>

3缓冲动画来回运动

需求：从left值是1000的位置缓冲到500的位置
问题2：往回运动的时候永远无法达到目标值
- 分析：current是509的时候 speed的值是-0.9 Math.ceil之后就成了-0 speed的值最终是0 left值还是509 导致目标值永远都是509
- 解决：让speed向下取整 Math.floor

<body>
    <button>起飞</button>
    <div></div>
    <p></p>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        /* 
            问题2：往回运动的时候  永远无法达到目标值
            分析：current是509的时候  speed的值是-0.9 Math.ceil之后就成了-0 speed的值最终是0   left值还是509 导致目标值永远都是509
            解决：让speed向下取整  Math.floor
        */
        //添加点击事件
        btn.onclick = function () {
            var timer = setInterval(function () {
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left"));
                var speed = (500 - current) / 10; // speed  速度/步长
                speed = Math.floor(speed);
                console.log(current);
                if (current == 500) {
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + speed + "px";
            }, 50)

        }
    </script>
</body>

来回运动speed值的问题
- 0-500 speed的值正数 Math.ceil
- 1000-500 speed的值是负数 Math.floor

<body>
    <button>起飞</button>
    <div></div>
    <p></p>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        /* 
           speed值的问题
             0-500  speed的值正数   Math.ceil
             1000-500 speed的值是负数  Math.floor
        */
        //添加点击事件
        btn.onclick = function () {
            var timer = setInterval(function () {
                //在当前left值的基础上+10
                var current = parseInt(getStyle(oDiv, "left"));
                var speed = (500 - current) / 10; // speed  速度/步长
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                console.log(current);
                if (current == 500) {
                    // 清除定时器
                    clearInterval(timer)
                }
                oDiv.style.left = current + speed + "px";
            }, 50)

        }
    </script>
</body>

4.缓冲动画来回运动函数封装

<body>
    <button>起飞</button>
    <div></div>
    <p></p>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        var oDiv = document.getElementsByTagName("div")[0]
        /* 
           speed值的问题
             0-500  speed的值正数   Math.ceil
             1000-500 speed的值是负数  Math.floor
        */
        //添加点击事件
        btn.onclick = function () {

            buffMove(oDiv, "left", 500, 20);
        }

        function buffMove(elem, attr, target, time) {
            /* elem 缓冲的元素 attr 需要缓冲的样式  target是目标值 time是缓冲时间 */
            var timer = setInterval(function () {
                //在当前left值的基础上+10
                var current = parseInt(getStyle(elem, attr));
                var speed = (target - current) / time; // speed  速度/步长
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                console.log(current);
                if (current == target) {
                    // 清除定时器
                    clearInterval(timer)
                }
                elem.style[attr] = current + speed + "px";
            }, 50)
        }
    </script>
</body>

5.透明度缓冲

问题3：缓冲透明度从1到0 没有缓冲动画
- 分析：current是1的时候 speed的值-0.1 用Math.floor取整之后变成-1 opacity的值是0
- 解决：是因为透明度的值太小了将透明度的值放大n倍放大100倍

<body>
    <div></div>
    <script>
        /* 
            问题3：缓冲透明度从1到0 没有缓冲动画
            分析：current是1的时候 speed的值-0.1 用Math.floor取整之后变成-1 opacity的值是0   
            解决：是因为透明度的值太小了  将透明度的值放大n倍 放大100倍
        */
        var oDiv = document.getElementsByTagName("div")[0];
        oDiv.onclick = function () {
            // 更改透明度  1-0
            buffMove(oDiv, "opacity", 0.2, 10)
        }

        function buffMove(elem, attr, target, time) {
            /* elem 缓冲的元素 attr 需要缓冲的样式  target是目标值 time是缓冲时间 */
            target = target * 100
            var timer = setInterval(function () {
                //在当前left值的基础上+10
                var current = parseInt(getStyle(elem, attr) * 100);
                var speed = (target - current) / time; // speed  速度/步长
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                console.log(current);
                if (current == target) {
                    // 清除定时器
                    clearInterval(timer)
                }
                // 其他属性
                // elem.style[attr] = current + speed + "px";
                // 透明度opacity
                elem.style[attr] = (current + speed) / 100;
            }, 50)
        }
    </script>
</body>

6.缓冲任意属性

<body>
    <div></div>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        oDiv.onclick = function () {
            // buffMove(oDiv,"width",500,10)
            buffMove(oDiv,"opacity",0.2,10)
        }
        function buffMove(elem, attr, target, time) {
            /* elem 缓冲的元素 attr 需要缓冲的样式  target是目标值 time是缓冲时间 */
            var timer = setInterval(function () {
                //在当前left值的基础上+10
                if (attr == 'opacity') { // 透明度属性
                    var current = parseInt(getStyle(elem, attr) * 100);
                    // opacity target的取值范围是0-1  才需要*100   其他属性大于1 不需要*100
                    target = target > 1 ? target : target * 100
                } else {//其他属性
                    var current = parseInt(getStyle(elem, attr));
                }
                var speed = (target - current) / time; // speed  速度/步长
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                console.log(current);
                if (current == target) {
                    // 清除定时器
                    clearInterval(timer)
                }
                if (attr == "opacity") {
                    // 透明度opacity
                    elem.style[attr] = (current + speed) / 100;
                } else {
                    // 其他属性
                    elem.style[attr] = current + speed + "px";
                }
            }, 50)
        }
    </script>
</body>

7.抽屉式运动

问题1：在移入事件的缓冲动画没有完成之前就移除会造成盒子抽搐
- 分析：是因为定时器累计的问题
- 解决方法：在定义一个新的定时器之前就清除原先的定时器确保只有一个定时器
问题2：同时运动多个盒子盒子无法达到目标值
- 分析：多个盒子都是调用buffMove函数一进入这个函数就将之前的定时器清除掉了共用了一个定时器的缘故
- 解决：给每个盒子都单独定义一个timer，将每个盒子的定时器id都存储到元素的自定义属性timer上

<body>
    <div>1</div>
    <div>2</div>
    <script>
        var oDiv = document.getElementsByTagName("div");
        oDiv[0].onmouseover = function(){
                // 200px-500px
                buffMove(oDiv[0],"width",500,10)
        }
        oDiv[0].onmouseout = function(){
               // 500px-200px
               buffMove(oDiv[0],"width",200,10)

        }
        oDiv[1].onmouseover = function(){
             //200-500px;
             buffMove(oDiv[1],"width",500,10)
        }
        oDiv[1].onmouseout = function(){
            //500px-200px
            buffMove(oDiv[1],"width",200,10)

        }
        // var timer;
        function buffMove(elem, attr, target, time) {
            /* elem 缓冲的元素 attr 需要缓冲的样式  target是目标值 time是缓冲时间 */
            clearInterval(elem.timer);
            //将每个盒子的定时器id都存储到元素的自定义属性timer上
            elem.timer = setInterval(function () { 
                //在当前left值的基础上+10
                if (attr == 'opacity') { // 透明度属性
                    var current = parseInt(getStyle(elem, attr) * 100);
                    // opacity target的取值范围是0-1  才需要*100   其他属性大于1 不需要*100
                    target = target > 1 ? target : target * 100
                } else {//其他属性
                    var current = parseInt(getStyle(elem, attr));
                }
                var speed = (target - current) / time; // speed  速度/步长
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                console.log(current);
                if (current == target) {
                    // 清除定时器
                    clearInterval(elem.timer)
                }
                if (attr == "opacity") {
                    // 透明度opacity
                    elem.style[attr] = (current + speed) / 100;
                } else {
                    // 其他属性
                    elem.style[attr] = current + speed + "px";
                }
            }, 50)
        }
    </script>
</body>