网页横向弹出框

主要运用知识点，鼠标经过事件，计时器，加速运动，缓冲运动

首先CSS代码片段

 .wrapper{
            position: absolute;
            top: 300px;
            left: -400px;
            width: 400px;
            height: 80px;
            background: orangered;
           
        }
        .show{
            position: absolute;
            right: -40px;
            top: 0px;
            width: 40px;
            height: 80px;
            background: orange;
            text-align: center;
        }
        ul{
            list-style: none;
        }
        li{           
            float: left;
            padding: 10px;
            
        }
        button{
            width: 70px;
            height: 40px;
            background-color: bisque;
            border-radius: 10px;
            font-weight: bold;
        }
        span{
            display: inline-block;
            width: 24px;
            text-align: center;
            padding-top: 8px;
            font-weight: bold;
        }

HTML5代码片段

<div class="wrapper">
        <ul>
            <li><button>俯卧撑</button></li>
            <li><button>跑步</button></li>
            <li><button>仰卧起坐</button></li>
            <li><button>睡觉</button></li>
        </ul>
        <div class="show">
            <span>请选择</span>
        </div>
    </div>

JS代码片段

var oDivwrapper = document.getElementsByTagName('div')[0];
        var timer = null;
        //鼠标经过弹出
        oDivwrapper.onmouseenter = function(){
            yundong(this,0);
        }
        //鼠标离开缩回
        oDivwrapper.onmouseleave = function(){
            yundong(this,-400);
        }

         function yundong(obj,target){
            clearInterval(timer);
            var speed;
            timer = setInterval(function(){
                //目标点减去当前位子，离目标点越小，速度越慢，形成缓速运动
                speed = (target - obj.offsetLeft) / 7;
                //如果速度大于0，向上取整，如果小于0向下取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //如果物体位子等于目标点，清除定时器，否则继续
               if(obj.offsetLeft === target){
                   clearInterval(timer);                  
               }else{
                obj.style.left = obj.offsetLeft + speed + 'px'; 
               }
            },30);
            
        }