Share to 1**************************
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
body{margin:0;padding:0;}
Div{width:100px;height:400px;background: #404144;p osition:absolute;left:-100px;}
Span{width: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;//must be global
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>
<body>
<div>
<span> Share to </span>
</div>
</body>
Share to 2**************************
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
body{margin:0;padding:0;}
Div{width:100px;height:400px;background: #404144;p osition:absolute;left:-100px;}
Span{width: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;//must be global
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>
<body>
<div>
<span> Share to </span>
</div>
</body>
Share to 3***************************
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
body{margin:0;padding:0;}
Div{width:100px;height:400px;background: #404144;p osition:absolute;left:-100px;}
Span{width: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;//must be global
function Startmove (obj,itarget)//can be used in case of less
{
var odiv=document.getelementsbytagname ("div") [0];//has been passed through a number of references, all without any further acquisition.
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>
<body>
<div>
<span> Share to </span>
</div>
</body>
Uniform Motion instance---share to