简单JS动画之分享框实现教程
程序员文章站
2022-05-10 19:29:20
用js实现最简单的动画，用setinterval(fun(),milltime); 其中fun()是每隔milltime毫秒执行一次的函数。 以下是简陋效果图，当鼠标在分享位置上时...
用js实现最简单的动画，用setinterval(fun(),milltime); 其中fun()是每隔milltime毫秒执行一次的函数。 以下是简陋效果图，当鼠标在分享位置上时，红色p将从边上慢慢向右展示，当鼠标离开分享位置时，红色p将慢慢向左隐藏
详细代码：
<body>
<p id="p1" >
<span id="share">分享</span>
</p>
</body>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
width: 200px;
height: 200px;
background-color: #f00;
position: relative;
left: -200px;
}
span{
width: 30px;
height: 50px;
background-color: aqua;
position: absolute;
top: 70px;
left: 200px;
text-align: center;
}
</style>
<script type="text/javascript">
var p1 = document.getelementbyid("p1");
var share = document.getelementbyid("share");
var timer = null;
var speed = 0;
p1.onmouseover = function(){
startmove(0);
}
p1.onmouseout = function(){
startmove(-200);
}
var startmove = function(target) {
if(target >= 0){
speed = 10;
}else {
speed = -10;
}
clearinterval(timer);
timer = setinterval(function () {
if(p1.offsetleft == target){
clearinterval(timer);
}else {
p1.style.left = p1.offsetleft + speed + "px";
}
}, 30);
}
</script>