效果展示

SDGIF_Rusult_1.gif

程序设计思路

封装函数animation

1.通过传入移动对象，界面最终的位置， 以及移动之后所执行的函数
2.其移动的曲线是用setinterval函数配合定位实现的
3.left = 对象的当前位置 + 一个变化的数( （目标位置 - 当前位置）/n )
4.判断右边的距离到所设置的最终位置的时候清除这个对象的定时事件

HTML部分

image.png

css部分

···
.box {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}

    span {
        position: absolute;
        display: block;
        left: 0;
        top: 150px;
        width: 100px;
        height: 50px;
        background-color: tomato;
    }
    
    .f {
        position: absolute;
        top: 300px;
        left: 0;
        width: 30px;
        height: 30px;
        z-index: 1;
        background-color: red;
    }
    
    .s {
        position: absolute;
        top: 300px;
        left: -70px;
        width: 100px;
        height: 30px;
        background-color: turquoise;
    }

···

JavaScript部分

···
<script>
var box = document.querySelector('.box');
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
var f = document.querySelector('.f');
var s = document.querySelector('.s');

    animation(box, 400);

    btn500.addEventListener('click', function() {
        console.log(1);
        animation(span, 500, function fn() {
            // alert('爷笑了');
            span.style.backgroundColor = 'red';
        });
    })
    btn800.addEventListener('click', function() {
        animation(span, 800, function fn() {
            span.style.backgroundColor = 'blue';
        });
    })
    f.addEventListener('mouseenter', function() {
        animation(s, 0, function fn() {
            f.innerHTML = '出 ';

        });
    });
    f.addEventListener('mouseleave', function() {
        animation(s, -70, function fn() {
            f.innerHTML = '收';
        });
    });
</script>

···

函数封装

image.png