自用-JS运动-1

最新推荐文章于 2023-09-26 17:04:28 发布

qq_42139305

最新推荐文章于 2023-09-26 17:04:28 发布

阅读量93

点赞数

分类专栏： js运动部分

本文链接：https://blog.csdn.net/qq_42139305/article/details/80374329

版权

js运动部分专栏收录该内容

1 篇文章 0 订阅

订阅专栏

多次点击后，运动速度加快

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position:absolute;
            top:10px;
            left:10px;
            width:100px;
            height:100px;
            background-color:orange;
        }
    </style>
</head>
<!-- 多次点击后 运动速度越来越快 -->
<body>
<div></div>
<script>
    var oDiv = document.getElementsByTagName('div')[0];
    oDiv.onclick = function () {
        startMove(this);
    }
    function startMove (obj) {
        setInterval(function () {
            var iSpeed = 1;
            obj.style.left = obj.offsetLeft + iSpeed + "px";
            // 注意offsetLeft 与  offsetleft
        }, 30)
    }
</script>
</body>
</html>

多次点击 timer 清除，跳出循环保持匀速运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position:absolute;
            top:10px;
            left:10px;
            width:100px;
            height:100px;
            background-color:orange;
        }
        button{
            margin-top:150px;
        }
    </style>
</head>
<!-- 多次点击后 timer被清零  保持匀速运动 -->
<body>
        <div></div>
        <button id='oBtn'>run</button>
        <script>
            var oDiv = document.getElementsByTagName('div')[0];
            var timer; 
            // var timer = null;  也可以。
            oBtn.onclick = function () {
                startMove(oDiv);
            }
            function startMove (obj) {
                // 清除定时器的方法
                clearInterval(timer); 
                // 设置定时器的方法
                timer = setInterval(function () {
                    var iSpeed = 1;
                    obj.style.left = obj.offsetLeft + iSpeed + "px";
                },30)
            }
        </script>
        </body>
</html>

设置 0 or 600 从左向右或是从右向左设置进行运动，并达到span的位置停止运动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position:absolute;
            top:0px;
            left:600px;
            width:100px;
            height:100px;
            background-color:orange;
        }
        span{
            position:absolute;
            left:300px;
            top:0px;
            width:1px;
            height:100px;
            background-color:#000;
        }
        button{
            margin-top:150px;
        }
    </style>
</head>
<!-- 从左向右 或是 从右向左  设置进行运动，并达到span的位置停止运动 -->
<body>
        <div></div>
        <span></span>
        <button id='oBtn'>run</button>
        <script>
            var oDiv = document.getElementsByTagName('div')[0];
            var timer; 
            // var timer = null;  也可以。
            oBtn.onclick = function () {
                startMove(oDiv);
            }
            function startMove (obj) {
                // 清除定时器的方法
                clearInterval(timer); 
                // 设置定时器的方法
                // var iSpeed = 10; 当设置为 === 300 时 可以整好停止在span上，应为300能整除10；
                // var iSpeed = 8;  当设置为 === 300 时 div方块不能停止，直接运动过span；
                // var iSpeed = 8;  当设置为 >= 300 时 div方块运动到304位置停止，没有被整除的原因；
                var  iSpeed;
                //  从左向右 及 从右向左
                if (obj.offsetLeft > 300) {
                    iSpeed = -8;
                }else {
                    iSpeed = 8;
                }
                timer = setInterval(function () {
                    // Math.abs 取绝对值使用
                    if ( Math.abs(300 - obj.offsetLeft) < Math.abs(iSpeed) ) {
                        clearInterval(timer);
                        obj.style.left = "300px";
                    }else {
                        obj.style.left = obj.offsetLeft + iSpeed + "px";
                    }
                },30)
            }
        </script>
        </body>
</html>

<body>
        <div></div>
        <span></span>
        <button id='oBtn'>run</button>
        <script>
            var oDiv = document.getElementsByTagName('div')[0];
            var timer; 
            oBtn.onclick = function () {
                startMove(oDiv);
            } 
            function startMove (obj) {
                clearInterval(timer); 
                var  iSpeed;
                timer = setInterval(function () {
                    iSpeed = (300 - obj.offsetLeft) / 7;
                    console.log(iSpeed);
                    // 使用上条程序时 方块移动位置会与span有一点缝隙，可是使用console.log（iSpeed）
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    // 当iSpeed大于零时 向上取整 最后变成 1 ；  小于零时 向下取整 最后变成 -1 ；
                    if (obj.offsetLeft === 300) {
                        clearInterval(timer);
                    }else {
                        obj.style.left = obj.offsetLeft + iSpeed + "px";                    
                    }
                    // 299.14
                    // 299 + 0.14 -> style 299.14 第一次
                    // 299 + 0.14 -> style 299.14 第二次 ---无穷次  iSpeed是小数
                    // oDiv.offsetLeft 所取出来的值是整数，无论你的行间样式是299.5还是299.6 都会输出299。
                },30)
            }
        </script>
        </body>

当鼠标移动到一个目标位置时拉出一长条显示内容。鼠标移出目标位时，内容条缩回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrapper {
            position:absolute;
            top: 300px;
            left: -400px;
            width: 400px;
            height: 80px;
            background:yellow;
        }
        .wrapper .show{
            position: absolute;
            top: 7px;
            right: -40px; 
            /* right 相对于上一级的right 相聚 10px 进行定位  */
            /* 即表示show的right与wrapper的right相差10px  并且show的右边界在wrapper的右边界的左侧。 wrapper右边界内侧*/
            /* 即表示show的right与wrapper的right相差-10px  并且show的右边界在wrapper的右边界的右侧。wrapper右边界外侧 */
            /* left: -30px; */
            /* 左边界 就是相对于 show的左边界与wrapper的左边界进行比较， */
            /* left>0 show.left在wrapper.left的右侧 wrapper左边界的内侧； <0 show.left在wrapper.left的左侧  wrapper左边界的外侧*/
            width: 40px;
            height: 80px;
            background:orange;
        }
    </style>
</head>
<!--当鼠标移动到一个目标位置时 拉出一长条显示内容。鼠标移出目标位时，内容条缩回-->
<body>
        <div class="wrapper">
            <div class="show"></div>
        </div>
        <script>
            var oDivWrapper = document.getElementsByTagName("div")[0];
            var timer;
            oDivWrapper.onmouseenter = function () {
                startMove(this, 0);
            }
            oDivWrapper.onmouseleave = function () {
                startMove(this, -400);
            }
            // 使用 形参target 代替目标点 点位
            function startMove (obj, target) {
                clearInterval(timer); 
                var  iSpeed;
                timer = setInterval(function () {
                    iSpeed = (target - obj.offsetLeft) / 7;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if (obj.offsetLeft === target) {
                        clearInterval(timer);
                    }else {
                        obj.style.left = obj.offsetLeft + iSpeed + "px";                    
                    }
                },30)
            }
        </script>
        </body>
</html>点击div使其透明度发生变化，有0.9到0.1   渐变色

点击div 使其透明度发生变化，由 0.9 至 0.1 的渐变色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            opacity: 0.9;
        }
    </style>
</head>
<!--点击div使其透明度发生变化，有0.9到0.1   渐变色 -->
<body>
    <div></div>
        <script>
            var oDiv = document.getElementsByTagName("div")[0];
            oDiv.onclick = function () {
                startMove(this, 10);
            }
            var timer;
        // 获取计算样式 兼容版函数 第一个参数决定你要获取哪一个标签的样式 第二个参数决定你要获取什么样式
            function getStyle (obj, attr) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                }else {
                    return window.getComputedStyle(obj, false)[attr];
                }
            }
            
            function startMove (obj, target) {
                clearInterval(timer);
                var iSpeed,
                    iCur;
                timer = setInterval ( function () {
                    iCur = parseFloat(getStyle(obj, 'opacity')) * 100;
                    iSpeed = (target - iCur) / 7;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if (iCur == target) {
                        clearInterval(timer);
                    }else {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    }
                }, 30);
            }

            // 透明度在0与1之间变换 结果是频繁的闪烁 
            // function startMove (obj, target) {
            //     clearInterval(timer);
            //     timer = setInterval ( function () {
            //         iSpeed = (target - parseFloat(getStyle(obj, 'opacity')));
            //         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            //         obj.style.opacity = parseFloat(getStyle(obj, 'opacity')) + iSpeed;
            //     }, 30);
            // }
            // startMove(oDiv, 0.5)

            // 这样打印出来的是字符串类型的数字 我们需要的数字及整数.
            // console.log(getStyle(oDiv, "width"), typeof(getStyle(oDiv, "width")));
            // 这样打印出来的是字符串类型的数字 我们需要的数字及小数.
            // console.log(getStyle(oDiv, "opacity"), typeof(getStyle(oDiv, "opacity")));
            
            // console.log(parseInt(getStyle(oDiv, "width")), typeof(getStyle(oDiv, "width")));
            // console.log(parseFloat(getStyle(oDiv, "opacity")), typeof(getStyle(oDiv, "opacity")));  

        </script>
        </body>
</html>

四个div 同时改变宽度、高度、透明度等发生改变并随着鼠标移动进行有规律的运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 50px;
            opacity: 1;
            border: 1px solid #000;
        }
    </style>
</head>
<!--四个div 宽度发生改变 并随着鼠标移动 进行有规律的运动 -->
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // 此种情况会发生 当快速连续点击四个div时  会发生之前的div不能变回100 因为清除定时器 发生冲突。
        // var oDivArray = document.getElementsByTagName('div');
        // var timer = null;
        // for (var i = 0; i < oDivArray.length; i++) {
        //     oDivArray[i].onmouseenter = function () {
        //         startMove(this, 400);
        //     }
        //     oDivArray[i].onmouseleave = function () {
        //         startMove(this, 100);
        //     }
        // }
        // 该函数只能满足 同一时间段内 只能开启一个定时器
        // function startMove (obj, target) {
        //     clearInterval(timer); 
        //     var  iSpeed;
        //     timer = setInterval(function () {
        //         iSpeed = (target - obj.offsetWidth) / 7;
        //         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        //         if (obj.offsetWidth === target) {
        //             clearInterval(timer);
        //         }else {
        //             obj.style.width = obj.offsetWidth + iSpeed + "px";                    
        //         }
        //     },30)
        // }


        // 四个div 宽度发生改变 并随着鼠标移动 进行有规律的运动
        // var oDivArray = document.getElementsByTagName('div');
        // var timer = null;
        // for (var i = 0; i < oDivArray.length; i++) {
        //     oDivArray[i].onmouseenter = function () {
        //         startMove(this, 400);
        //     }
        //     oDivArray[i].onmouseleave = function () {
        //         startMove(this, 100);
        //     }
        // }
        // 给每一个标签都设置自己的定时器
        // 使用自己的定时器 将 自己的定时器 变成该标签的属性 obj.timer，清除也是清除该标签的属性
        // function startMove (obj, target) {
        //     clearInterval(obj.timer); 
        //     var  iSpeed;
        //     obj.timer = setInterval(function () {
        //         iSpeed = (target - obj.offsetWidth) / 7;
        //         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        //         if (obj.offsetWidth === target) {
        //             clearInterval(obj.timer);
        //         }else {
        //             obj.style.width = obj.offsetWidth + iSpeed + "px";                    
        //         }
        //     },30)
        // }  


        // 四个div 同时改变宽度、高度、透明度等发生改变 并随着鼠标移动 进行有规律的运动
        var oDivArray = document.getElementsByTagName('div');
        var timer = null;
        oDivArray[0].onclick = function () {
            startMove(this, 400, 'width');
        }
        oDivArray[1].onclick = function () {
            startMove(this, 400, 'height');
        }
        oDivArray[2].onclick = function () {
            startMove(this, 50, 'opacity');
        }
        oDivArray[3].onclick = function () {
            startMove(this, 50, 'borderWidth');
        }

        function getStyle (obj, attr) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                }else {
                    return window.getComputedStyle(obj, false)[attr];
                }
            }

        给每一个标签都设置自己的定时器
        使用自己的定时器 将 自己的定时器 变成该标签的属性 obj.timer，清除也是清除该标签的属性
        加一个参数attr，通过它来指定让那个属性发生变化，让target指定变化多少，让obj指定
        function startMove (obj, target, attr) {
            clearInterval(obj.timer); 
            var  iSpeed,
                 iCur;
            obj.timer = setInterval(function () {
                if (attr == 'opacity') {
                    iCur = parseFloat( getStyle(obj, attr) ) * 100;
                }else {
                    iCur = parseInt( getStyle(obj, attr) )
                }
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if (iCur == target) {
                    clearInterval(obj.timer);
                }else {
                    if (attr == 'opacity') {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    }else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }

            },30)
        }  
    </script>
    </body>
</html>

多物体链式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background:red;
            position:absolute;
            left: 0px;
            opacity:1;
        }
        .top {
            top: 100px;
        }
        .bottom {
            top: 300px;
        }
    </style>
</head>
<!--四个div 宽度发生改变 并随着鼠标移动 进行有规律的运动 -->
<body>
<div class="top"></div>
<div class="bottom"></div>
    <script>

// 多物体多值链式运动框架 var oDivArray = document.getElementsByTagName('div'); var timer = null; // 把这个对象传进去当做我要去改变某一个标签的那些属性和这些属性所对应的一个目标点的话是一个最好的选择了 var targetObj = { width: 400, height: 400, opacity: 50, left: 300, top: 200, } oDivArray[0].onclick = function () { startMove(this, targetObj,function () { startMove(oDivArray[1], targetObj); }) } function getStyle (obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, false)[attr]; } } // json 形参 function startMove (obj, json,callback) { clearInterval(obj.timer); var iSpeed, iCur; obj.timer = setInterval( function () { var bStop = true; for (var attr in json) { if (attr == 'opacity') { iCur = parseFloat( getStyle(obj,attr) ) * 100; }else { iCur = parseInt( getStyle(obj,attr) ); } iSpeed = (json[attr] - iCur) / 7; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (attr == 'opacity') { obj.style.opacity = (iCur + iSpeed) / 100; }else { obj.style[attr] = iCur + iSpeed + 'px'; } if (iCur != json[attr]) { bStop = false; } } if (bStop ) { clearInterval(obj.timer); typeof callback == 'function' ? callback() : ''; //判断是否将 callback参数传入进来它是不是一个函数是函数执行，不是为空 } }, 30); } </script> </body></html>