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

Posted 2021-11-25 tyouu

效果展示

 

实现原理

　　1. html结构：

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

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

　　3. 运动函数：

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

　　　　2）设置运动速度

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

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

 

代码实现

HTML:

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

 

CSS:

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #contain {
 6     width: 200px;
 7     height: 200px;
 8     position: relative;
 9     left: -200px;
10     top: 0;
11     background: pink;
12 }
13 #share {
14     width: 25px;
15     height: 50px;
16     position: absolute;
17     left: 200px;
18     top: 75px;
19     background: lightgreen;
20     text-align: center;
21     line-height: 25px;
22 }

 

javascript:

 1 window.onload = function (){
 2     oDiv = document.getElementById(‘contain‘);
 3     oDiv.onmouseover = function (){
 4         startMove(0);//0为目标值
 5     }
 6     oDiv.onmouseout = function (){
 7         startMove(-200);//-200为目标值
 8     }
 9 }
10 var timer = null;
11 
12 function startMove(iTarget){//iTarget为offsetLeft目标值
13     //开始前清除所有定时器
14     clearInterval(timer);
15     var oDiv = document.getElementById(‘contain‘);
16     timer = setInterval(function(){
17         var speed = 0;
18         //判断运动方向和speed正负
19         if (oDiv.offsetLeft < iTarget) {//向右运动弹出
20             speed = 10;//设置定速
21             oDiv.style.left = oDiv.offsetLeft + speed + ‘px‘;//现在的位置加上改变的距离
22         }else if (oDiv.offsetLeft > iTarget) {
23             speed = -10;
24             oDiv.style.left = oDiv.offsetLeft + speed + ‘px‘;
25         }else {//oDiv.offsetLeft == iTarget时
26             clearInterval(timer);//到达目标值清除定时器
27         }
28     }，30)；
29 }

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

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

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

 

---

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

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

 

*参考资料来源慕课网

*有错误的地方欢迎指正

*转载请注明出处