代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div {
width: 200px;
height: 500px;
background: chartreuse;
position: absolute;
left: -200px;
top: 0px;
}
#div span {
width: 20px;
height: 70px;
background: fuchsia;
position: absolute;
right: -20px;
top: 100px;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById("div");
var iTarget = null;
oDiv.onmouseover = function () {
startMove( 0);
};
oDiv.onmouseout = function () {
startMove(-200);
}
var timer = null;
function startMove( iTarget) {
clearInterval(timer);
timer = setInterval(function () {
var speed=0;
if(oDiv.offsetLeft>iTarget){
speed=-10;
}else{
speed=10;
}
if (oDiv.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
},
30
)
}
}
</script>
</head>
<body>
<div id="div">
<span>分享到</span>
</div>
</body>
</html>
运行结果：
初始：
鼠标移入：
鼠标移出：
浙公网安备 33010602011771号