js收官运动

小兔子的博客

于 2021-07-07 11:04:35 发布

阅读量121

点赞数

分类专栏： javascript基础文章标签： js

本文链接：https://blog.csdn.net/weixin_52484354/article/details/118540767

版权

javascript基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一，匀速运动封装函数


       #demo {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        
        .start {
            margin-top: 150px;
        }
        
        span {
            position: absolute;
            height: 100px;
            left: 300px;
            top: 0px;
            width: 1px;
            background-color: black;
        }

    <div id="demo"></div>
    <span></span>
    <button class="start">开始</button>
    <script>
        var dem = document.getElementById("demo");
        var st = document.getElementsByClassName("start")[0];

        var time = null;
        //匀速运动
        function startMove(dom, target) {
            var ispeed = target - dom.offsetLeft > 0 ? 7 : -7; //判断方块在左边还是右边
            clearInterval(time); //防止多次点击按钮触发多次事件
            time = setInterval(function() {
                if (Math.abs(target - dom.offsetLeft) < Math.abs(ispeed)) {
                    clearInterval(time);
                    dom.style.left = target + "px"; //差一点对其，但是运动为7比如还差4，那么就停止运动，强制给他赋值对齐
                } else {
                    dom.style.left = dom.offsetLeft + ispeed + "px";
                }
            }, 60);

        }
        st.onclick = function() {
            startMove(dem, 300);
        }
    </script>

二，缓冲运动封装函数

.wrapper {
            width: 400px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 200px;
            left: -400px;
        }
        
        .wrapper span {
            width: 50px;
            height: 100px;
            background-color: orange;
            position: absolute;
            right: -50px;
            top: 0px;
        }

<div class="wrapper">   //给父级加事件，通过冒泡移入子元素也会触发事件
        <span></span>
    </div> 

var time = null;
//缓冲运动
function startMove(dom, target) {
            var ispeed = null;
            clearInterval(time);
            time = setInterval(function() {
                ispeed = (target - dom.offsetLeft) / 8;
                ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
                if (dom.offsetLeft == target) {//因为速度最终为0所以只需要判断这一个条件就可以
                    clearInterval(time);
                } else {
                    dom.style.left = dom.offsetLeft + ispeed + 'px';
                }
            }, 60);
        }
//小demo
var de = document.getElementsByClassName("wrapper")[0];
        de.onmouseenter = function() { //鼠标移入事件
            startMove(this, 0);
        }
        de.onmouseleave = function() { //鼠标移出事件
            startMove(this, -400);
        }

三，多物体，多值运动

        .topDiv {
            width: 100px;
            height: 100px;
            opacity: 1;
            border: 1 solid black;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .bottomDiv {
            position: absolute;
            left: 0;
            top: 200px;
            width: 50px;
            height: 50px;
            background-color: orange;
            opacity: 1;
            border: 1 solid black;
        }
    <div class="topDiv"></div>
    <div class="bottomDiv"></div> 
       var oTopDiv = document.getElementsByClassName("topDiv")[0];
        var oBottomDiv = document.getElementsByClassName("bottomDiv")[0];
        var time = null;

        function getStyle(dom, attr) {  //计算尺寸的封装函数
            if (window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[attr];
            } else {
                return dom.currentStyle[attr];
            }
        }

        function startMove(dom, attrObj, callback) {
            var iCur = null,  //当前的值
                ispeed = null;  //每次加的值
            clearInterval(dom.time);
            dom.time = setInterval(function() {
                var bStop = true;
                for (var attr in attrObj) {
                    if (attr == "opacity") {
                        iCur = parseFloat(getStyle(dom, attr)) * 100;
                    } else {
                        iCur = parseInt(getStyle(dom, attr));
                    }
                    ispeed = (attrObj[attr] - iCur) / 7;
                    ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
                    if (attr == "opacity") {
                        dom.style[attr] = (iCur + ispeed) / 100;
                    } else {
                        dom.style[attr] = iCur + ispeed + "px";
                    }
                    if (iCur != attrObj[attr]) { //判断是不是所有的属性都设置完成
                        bStop = false;
                    }
                }
                if (bStop) { //如果都设置完成那么执行回调函数
                    clearInterval(dom.time);
                    typeof callback == 'function' && callback(); //前面成立才会执行后面
                }
            }, 30);
        }

        oTopDiv.onclick = function() {
                startMove(this, {
                    width: 400,
                    height: 400,
                    left: 200,
                    top: 300,
                    opacity: 50
                }, function() {
                    startMove(oBottomDiv, {
                        width: 400,
                        height: 400,
                        left: 200,
                        top: 300,
                        opacity: 50
                    }, function() {
                        alert("alow");
                    })
                })
            }

四，多物体单值，不同效果运动

        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
            opacity: 1;
            border: 1px solid black;
        }
      <div></div>
    <div></div>
    <div></div>
    <div></div>
var oDivArray = document.getElementsByTagName("div");
        var time = null;
        oDivArray[0].onclick = function() {
            startMove(this, 'width', 300);
        }
        oDivArray[1].onclick = function() {
            startMove(this, "height", 300);
        }
        oDivArray[2].onclick = function() {
            startMove(this, "opacity", 30);
        }
        oDivArray[3].onclick = function() {
            startMove(this, "borderWidth", 20);
        }

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

        function startMove(dom, attr, target) {
            clearInterval(dom.time);
            var iCur = null,
                ispeed = null;
            dom.time = setInterval(function() {
                if (attr == 'opacity') {
                    iCur = parseFloat(getStyle(dom, attr)) * 100;
                } else {
                    iCur = parseInt(getStyle(dom, attr));
                }
                ispeed = (target - iCur) / 7;
                ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
                if (target == iCur) {
                    clearInterval(dom.time);
                }
                if (attr == 'opacity') {
                    dom.style[attr] = (iCur + ispeed) / 100;
                } else {
                    dom.style[attr] = iCur + ispeed + "px";
                }
            }, 30);
        }

五，多物体单值，同一效果运动

//css和html跟上面四共用
var oDivArray = document.getElementsByTagName("div");

        function getStyle(dom, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[attr];
            } else {
                return dom.currentStyle[attr];
            }
        }
        for (var i = 0; i < oDivArray.length; i++) {
            oDivArray[i].onmouseenter = function() {
                startMove(this, 300);
            }
            oDivArray[i].onmouseleave = function() {
                startMove(this, 100);
            }
        }
        var time = null;

        function startMove(dom, target) {
            var ispeed = null,
                iCur = null;
            clearInterval(dom.time);
            dom.time = setInterval(function() {
                iCur = parseInt(getStyle(dom, 'width'));
                ispeed = (target - iCur) / 8;
                ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
                if (iCur == target) { //因为速度最终为0所以只需要判断这一个条件就可以
                    clearInterval(dom.time);
                } else {
                    dom.style.width = iCur + ispeed + 'px';
                }
            }, 60);
        }

六，方块透明度缓冲

    <div class="demo"></div>
    .demo {
            width: 100px;
            height: 100px;
            opacity: 1;
            background-color: red;
        }
 var oDivArray = document.getElementsByClassName("demo")[0];
        //方块的透明度缓冲变换
        var time = null;
        function startMove(dom, target) {
            clearInterval(time);
            var iCur = null;
            var ispeed = null;
            time = setInterval(function() {
                iCur = parseFloat(getStyle(dom, 'opacity')) * 100;
                ispeed = (target - iCur) / 7;
                ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
                if (iCur == target) {
                    clearInterval(time);
                } else {
                    dom.style.opacity = (iCur + ispeed) / 100;
                }

            }, 30);
        }
        function getStyle(dom, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(dom, null)[attr];
            } else {
                return dom.currentStyle[attr];
            }
        }
        oDivArray.onclick = function() {
                startMove(this, 50);
            }

七，弹性运动小案例

ul {
            width: 800px;
            height: 100px;
            list-style: none;
            position: relative;
            top: 100px;
            left: 300px;
            clear: both;
            padding: 0;
            margin: 0;
        }
        
        .ele {
            width: 198px;
            height: 98px;
            border: 1px solid black;
            background-color: orange;
            float: left;
            line-height: 98px;
            text-align: center;
        }
        
        .bg {
            position: absolute;
            width: 200px;
            height: 100px;
            top: 0;
            left: 0;
            opacity: 0.3;
            background-color: deeppink;
        } 
<ul>
        <li class="ele">a</li>
        <li class="ele">b</li>
        <li class="ele">c</li>
        <li class="ele">d</li>
        <li class="bg"></li>
    </ul>

 
        
var oli = document.getElementsByTagName("li");
        var obg = oli[oli.length - 1];
        for (var i = 0; i < oli.length - 1; i++) {
            oli[i].onmouseenter = function() {
                startMove(obg, this.offsetLeft);
            }
        }
        var timer = null;

        function startMove(dom, target) {
            clearInterval(timer);
            var ispeed = 0; //初始速度
            var a; //加速度
            var u = 0.8; //生成摩擦力
            timer = setInterval(function() {
                a = (target - dom.offsetLeft) / 5;
                ispeed += a;
                ispeed *= u; //相当于一个摩擦力，让他慢慢停下来
                if (Math.abs(ispeed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {
                    clearInterval(timer);
                    dom.style.left = target + "px";
                } else {
                    dom.style.left = dom.offsetLeft + ispeed + "px";
                }
            }, 40);

        }

八，模拟重力场小案例，和小球弹的函数(碰到4个边会往回弹，直到速度为0)

    <div></div>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 50%;
        }

var timer = null;
        var oDiv = document.getElementsByTagName("div")[0];
        oDiv.onmousedown = function(e) {

            clearInterval(timer);
            var event = e || window.event;
            var disX = event.clientX - this.offsetLeft;
            var disY = event.clientY - this.offsetTop;
            var self = this;
            var lastX = 0; //最后一次的位置，用来计算加速度
            var lastY = 0;
            var ispeedX = 0, //速度
                ispeedY = 0;
            document.onmousemove = function(e) {
                var event = e || window.event;
                var newLeft = event.clientX - disX; ///clientX鼠标当前的位置
                var newTop = event.clientY - disY;
                ispeedX = newLeft - lastX; //现在的位置减去最后依次的位置计算出速度
                ispeedY = newTop - lastY;
                lastX = newLeft;
                lastY = newTop;
                self.style.left = newLeft + "px";
                self.style.top = newTop + 'px';
            }
            document.onmouseup = function() {
                document.onmouseup = null;
                document.onmousemove = null;
                // self.onmousedown = null;
                startMove(self, ispeedX, ispeedY);
            }
        }


        function startMove(dom, ispeedX, ispeedY) {
            clearInterval(timer);
            // var ispeedX = 5; //横向初始速度
            // var ispeedY = 6; //纵向初始速度
            var g = 3; //加速度
            timer = setInterval(function() {
                ispeedY += g;
                var newTop = dom.offsetTop + ispeedY;
                var newLeft = dom.offsetLeft + ispeedX;
                if (newTop >= document.documentElement.clientHeight - dom.clientHeight) { //clientHeight求可视区宽度
                    ispeedY *= -1;
                    ispeedX *= 0.8; //慢慢让他产生摩擦停下来
                    ispeedY *= 0.8;
                    newTop = document.documentElement.clientHeight - dom.clientHeight; //到底之后可能还差一点，强制给他赋值跟底边重合
                }
                if (newTop <= 0) {
                    newTop = 0;
                    ispeedY *= -1;
                    ispeedX *= 0.8;
                    ispeedY *= 0.8;
                }
                if (newLeft >= document.documentElement.clientWidth - dom.clientWidth) {
                    newLeft = document.documentElement.clientWidth - dom.clientWidth;
                    ispeedX *= -1;
                    ispeedX *= 0.8;
                    ispeedY *= 0.8;
                }
                if (newLeft <= 0) {
                    newLeft = 0;
                    ispeedX *= -1;
                    ispeedX *= 0.8;
                    ispeedY *= 0.8;
                }
                if (Math.abs(ispeedX) < 1) {
                    ispeedX = 0;
                }
                if (Math.abs(ispeedY) < 1) {
                    ispeedY = 0;
                }
                if (ispeedX == 0 && ispeedY == 0 && document.documentElement.clientHeight - dom.clientHeight == newTop) {
                    clearInterval(timer);
                    console.log("over");
                } else {
                    dom.style.top = newTop + "px";
                    dom.style.left = newLeft + "px";
                }


            }, 30);
        }