*****************分享到1**************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{100px;height:400px;background:#404144;position: absolute;left:-100px;}
span{20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementsByTagName("div")[0];
oDiv.onmouseover=function()
{
startMove(10,0);
};
oDiv.onmouseout=function()
{
startMove(-10,-100);
}
};
var timer=null;//必须全局
function startMove(iSpeed,iTarget)
{
var oDiv=document.getElementsByTagName("div")[0];
var Speed=iSpeed;
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){clearInterval(timer);}
else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}
},30)
}
</script>
</head>
<body>
<div>
<span>分享到</span>
</div>
</body>
</html>
*****************分享到2**************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{100px;height:400px;background:#404144;position: absolute;left:-100px;}
span{20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementsByTagName("div")[0];
oDiv.onmouseover=function()
{
startMove(oDiv,10,0);
};
oDiv.onmouseout=function()
{
startMove(oDiv,-10,-100);
}
};
var timer=null;//必须全局
function startMove(obj,iSpeed,iTarget)
{
// var oDiv=document.getElementsByTagName("div")[0];
var Speed=iSpeed;
clearInterval(timer);
timer=setInterval(function(){
if(obj.offsetLeft==iTarget){clearInterval(timer);}
else{obj.style.left=obj.offsetLeft+Speed+"px";}
},30)
}
</script>
</head>
<body>
<div>
<span>分享到</span>
</div>
</body>
</html>
*******************分享到3***************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{100px;height:400px;background:#404144;position: absolute;left:-100px;}
span{20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementsByTagName("div")[0];
oDiv.onmouseover=function()
{
startMove(oDiv,0);
};
oDiv.onmouseout=function()
{
startMove(oDiv,-100);
}
};
var timer=null;//必须全局
function startMove(obj,iTarget) //能用的情况下能少就少
{
//var oDiv=document.getElementsByTagName("div")[0];//已经通过參数传进来了全部无需再获取
var Speed=0;
if(obj.offsetLeft<iTarget){Speed=10}
else{Speed=-10;}
clearInterval(timer);
timer=setInterval(function(){
if(obj.offsetLeft==iTarget){clearInterval(timer);}
else{obj.style.left=obj.offsetLeft+Speed+"px";}
},30)
}
</script>
</head>
<body>
<div>
<span>分享到</span>
</div>
</body>
</html>