运动基础实例1-左侧分享按钮滑出

body

<div id="div1"><video src="../img/lijiahui.mp4" controls="controls"></video><span>分享</span></div>

css

#div1{width: 150px;
        height: 200px;
        top: 400px;
        background: cornflowerblue;
        position: fixed;
        left:-150px;
        text-align: center;
        font-family: 楷体;
    }
        #div1 span{
            position: absolute;
            width: 20px;
            height: 60px;
            line-height: 20px;
            background: cornflowerblue;
            right: -20px;
            top: 70px;
            cursor:pointer;/* 鼠标触碰时变小手 */
        }
        #div1 video{
            width: 100%;
            height: 100%;
        }

javascript

//封装一个获取id的方法，方便用到多个id时使用
function $(id) {
    return document.getElementById(id);
}
//onmouseover 鼠标经过事件
$("div1").onmouseover = () => {
    starMove();
};
//onmouseout 鼠标移开事件
$("div1").onmouseout = () => {
   outMove();
};
let time = null;
function starMove() {
    clearInterval(time);
time = setInterval(() => {
    if ($("div1").offsetLeft == 0) {
        clearInterval(time);
    }
    else {
        $("div1").style.left = $("div1").offsetLeft+10+'px';
    }
},30)
}
function outMove() {
    clearInterval(time);
time = setInterval(() => {
    if ($("div1").offsetLeft == -150) {
        clearInterval(time)
    }
    else {
        $("div1").style.left = $("div1").offsetLeft+-10+'px';
    }
},30)
}