这种分享到的效果很常见，在我们的网站上。鼠标滑入展示，滑出就隐藏。现在我们使用定时器功能来实现这种滑动效果。
感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析，讲解，该系列还在不断更新中。
实现效果
实现代码
const oBox = document.getElementById("box");
const oSpan = document.getElementById("span1");
let oTimer = null
oBox.addEventListener('mouseover', function(){
move(this,0)
}, false)
oBox.addEventListener('mouseout', function(){
move(this,-100)
}, false)
function move(obj,target){
clearInterval(oTimer);
oTimer = setInterval(function(){
const speed = target < 0 ? -10 : 10;
const isFlag = target < 0 ? obj.offsetLeft <= target: obj.offsetLeft >= target
if(isFlag){
clearInterval(oTimer);
}else{
obj.style.left = obj.offsetLeft + speed + 'px';
}
},30)
}
}
move方法是我们封装的一个运动方法，参数运动的对象和目标位置，传入调用即可。
样式美化
*{
padding: 0;
margin: 0;
}
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:100px;
left:-100px;
}
#span1{
position: absolute;
right: -30px;
top: 10px;
width: 30px;
background: #000;
color:#fff;
text-align: center;
padding:10px 0;
cursor: pointer;
}
静态页面结构
<body>
<div id="box">
<span id="span1">分享到</span>
</div>
</body>