鼠标移入时显示，移除时隐藏

来源：互联网发布：网络证件编辑：程序博客网时间：2024/05/21 15:41

1、匀速运动

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动画</title><style>body,div,span{margin:0;padding:0;}#div1{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;}#div1 span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;}</style></head><body><div id="div1"><span id="share">分享</span></div></body></html>

<script type="text/javascript">window.onload=function(){var oDiv=document.getElementById('div1');oDiv.onmouseover=function(){startMove(9,0);}oDiv.onmouseout=function(){startMove(-7,-200);}}var timer=null;function startMove(speed,iTarget){clearInterval(timer);var oDiv=document.getElementById('div1');timer=setInterval(function(){if(Math.floor(Math.abs((oDiv.offsetLeft-iTarget)/Math.abs(speed)))==0){oDiv.style.left=iTarget+"px";clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+"px";}},10);}</script>

2、变速运动

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动画--缓冲运动</title><style>body,div,span{margin:0;padding:0;}#div1{width:200px;height:200px;background:red;position:relative;left:-200px;top:0;}#div1 span{width:20px;height:50px;background:blue;position:absolute;left:200px;top:75px;}</style></head><body><div id="div1"><span id="share">分享</span></div></body></html>

<script type="text/javascript">window.onload=function(){var oDiv=document.getElementById('div1');oDiv.onmouseover=function(){startMove(0);}oDiv.onmouseout=function(){startMove(-200);}}var timer=null;function startMove(iTarget){clearInterval(timer);var oDiv=document.getElementById('div1');timer=setInterval(function(){var speed=(iTarget-oDiv.offsetLeft)/20;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(oDiv.offsetLeft==iTarget){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+"px";}},20);}</script>

0 0