鼠标滑过侧边弹出内容（JS）

效果展示

实现原理

　　1. html结构：

 <div id="contain">
     <span id="share">分享</span>
 </div>

　　2. 外层div为要隐藏在左边的内容，要设置相对定位，并且left为负的容器宽度；鼠标可滑过的“分享”设置绝对定位，相对于外层div的位置可自定义（此处为居中）

　　3. 运动函数：

　　　　1）根据目标值和当前位置判断运动方向（设置定时器）

　　　　2）设置运动速度

　　　　3）根据当前位置和速度获取最新位置

　　　　4）到达目标值后停止（清除定时器）

代码实现

HTML:

 <div id="contain">
     <span id="share">分享</span>
 </div>

CSS:

 * {
     margin:;
     padding:;
 }
 #contain {
     width: 200px;
     height: 200px;
     position: relative;
     left: -200px;
     top:;
     background: pink;
 }
 #share {
     width: 25px;
     height: 50px;
     position: absolute;
     left: 200px;
     top: 75px;
     background: lightgreen;
     text-align: center;
     line-height: 25px;
 }

JavaScript:

 window.onload = function (){
     oDiv = document.getElementById('contain');
     oDiv.onmouseover = function (){
         startMove(0);//0为目标值
     }
     oDiv.onmouseout = function (){
         startMove(-200);//-200为目标值
     }
 }
 var timer = null;

 function startMove(iTarget){//iTarget为offsetLeft目标值
     //开始前清除所有定时器
     clearInterval(timer);
     var oDiv = document.getElementById('contain');
     timer = setInterval(function(){
         var speed = 0;
         //判断运动方向和speed正负
         if (oDiv.offsetLeft < iTarget) {//向右运动弹出
             speed = 10;//设置定速
             oDiv.style.left = oDiv.offsetLeft + speed + 'px';//现在的位置加上改变的距离
         }else if (oDiv.offsetLeft > iTarget) {
             speed = -10;
             oDiv.style.left = oDiv.offsetLeft + speed + 'px';
         }else {//oDiv.offsetLeft == iTarget时
             clearInterval(timer);//到达目标值清除定时器
         }
     }，30)；
 }

以上代码实现后效果如下图，物体为均速运动（speed=10)，交互效果并不是最好，我们想实现的是变速运动，只需将定时器部分修改一下。

 function startMove(iTarget){//iTarget为offsetLeft目标值
     //开始前清除所有定时器
     clearInterval(timer);
     var oDiv = document.getElementById('contain');
     timer = setInterval(function(){
         //设置速度（分母越小速度越快）
         var speed = (iTarget - oDiv.offsetLeft) / 8;
         //负-->向下取整，正-->向上取整（未达到目标值时speed不能为0）
         //如果不取整最后会不能完全达到目标值（下面有效果图）
         speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
         if (oDiv.offsetLeft == iTarget) {
             //到达目标值清除定时器
             clearInterval(timer);
         }else {
             //现在的位置加上改变的距离
             oDiv.style.left = oDiv.offsetLeft + speed + 'px';
         }
     },30);
 }

至此就可以达到最初变速运动效果~

---

*变速运动中speed未取整时运动效果（下图）

上图可以发现元素中left的值不能达到0或-200。

*参考资料来源慕课网

*有错误的地方欢迎指正

*转载请注明出处