整理思路,

第一个是有BUG的;

写法如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px;height:400px;background: red;position: absolute;left:-200px;}
#div1 span{position: absolute;width: 20px;height: 80px;line-height: 20px;background:yellow;top: 160px;right: -20px;}
</style>
<script>
window.onload=function() {
var oDiv = document.getElementById("div1");

oDiv.onmouseover = function () {
startMove();
};
oDiv.onmouseout = function () {
stopMove();
};
};

var timer1=null;
var timer2=null;
function startMove() {
var oDiv = document.getElementById("div1");

clearInterval(timer1);
timer1 = setInterval(function () {
if (oDiv.offsetLeft <=-10) {
oDiv.style.left = oDiv.offsetLeft + 10 + "px";
}
else {
clearInterval(timer1);
}
}, 30);
}

function stopMove() {
var oDiv=document.getElementById("div1");

clearInterval(timer2)
timer2=setInterval(function(){
if(oDiv.offsetLeft!=-200){
oDiv.style.left=oDiv.offsetLeft-10+"px";
}
else
{
clearInterval(timer2);
}
},30)
}
</script>
</head>
<body>
<div id="div1" >
<span>分享到</span>
</div>
</body>
</html>

这种写出来的代码,鼠标移近和移出就一直抖动;改正后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px;height:400px;background: red;position: absolute;left:-200px;}
#div1 span{position: absolute;width: 20px;height: 80px;line-height: 20px;background:yellow;top: 160px;right: -20px;}
</style>
<script>
window.onload=function(){
oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove1();
};
oDiv.onmouseout=function(){
startMove2();
}

};

var timer=null;
function startMove1(){
var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==0)
{
clearInterval(timer)
}
else
{
oDiv.style.left=oDiv.offsetLeft+10+"px";
}
},30)
};

function startMove2(){
var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==-200)
{
clearInterval(timer)
}
else
{
oDiv.style.left=oDiv.offsetLeft-10+"px";
}
},30)
};

</script>
</head>
<body>
<div id="div1" >
<span>分享到</span>
</div>
</body>
</html>

然后利用函数传参的方法进行合并:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px;height:400px;background: red;position: absolute;left:-200px;}
#div1 span{position: absolute;width: 20px;height: 80px;line-height: 20px;background:yellow;top: 160px;right: -20px;}
</style>
<script>
window.onload=function(){
oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove1(0,10);
};
oDiv.onmouseout=function(){
startMove1(-200,-10);
}
};

var timer=null;
function startMove1(number,speed){
var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==number)
{
clearInterval(timer)
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
};
</script>
</head>
<body>
<div id="div1" >
<span>分享到</span>
</div>
</body>
</html>

继续修改,根据目标值和当前位置的关系来确定speed;然后把speed从参数中去掉:

最终效果如下

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px;height:400px;background: red;position: absolute;left:-200px;}
#div1 span{position: absolute;width: 20px;height: 80px;line-height: 20px;background:yellow;top: 160px;right: -20px;}
</style>
<script>
window.onload=function(){
oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove1(0);
};
oDiv.onmouseout=function(){
startMove1(-200);
}
};

var timer=null;
function startMove1(mubiao){
var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function(){
var speed=null;
if(oDiv.offsetLeft>mubiao){
speed=-10;
} else{
speed=10;
}

if(oDiv.offsetLeft==mubiao)
{
clearInterval(timer)
} else {
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
};
</script>
</head>
<body>
<div id="div1" >
<span>分享到</span>
</div>
</body>
</html>

““`