【原生js案例】webApp实现一个分享到的功能
这种分享到的效果很常见，在我们的网站上。鼠标滑入展示，滑出就隐藏。现在我们使用定时器功能来实现这种滑动效果。
感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析，讲解，该系列还在不断更新中。
实现效果
实现代码
const oBox = document.getElementById("box");const oSpan = document.getElementById("span1");let oTimer = nulloBox.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 >= targetif(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>