前端移出移入

创建一个按钮

　　<div id="page_begin_html">
        <div class="gs_html">
            <button class="gs" onclick="gs()"></button>
        </div>
　　</div>

之后在创建一个div这个是我们要进行操作的div元素

<div id="home">
    <div id="header">
        栏
    </div>
<div>

html样式：

/* 收缩栏 */
#home{
    width: 200px;
    padding: 10px;
    position: relative;/*定位*/
    left: -240px;/*隐藏栏*/
    transition: all ease 0.5s;/*动画生成*/
    background-color: rgb(248, 244, 239);
    border-radius: 0 6px 6px 0;/*栏圆边*/
    box-shadow: 0 0 2px 2px #CCCCD8;/*边框阴影*/
}

JavaScript样式：

创建一个元素 gstis 赋值一个 true 给他

之后获取我们的要操作的 div 元素区域

然后对 gstis 进行判断他是否为 true

为 true 就将div元素整体放回原位就可以，之后在将 false 赋值给 gstis

else 就将div元素整体进行隐藏

var gstis = true;
function gs() {
    var a = document.getElementById("home");
    if (gstis == true) {
        a.style.left = 0;
        gstis = false;
    } else {
        a.style.left = -240 + "px";
        gstis = true;
    }

}