<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var iTimer = null;
oDiv1.onmouseover = function() {
startMove(0, 10);
}
oDiv1.onmouseout = function() {
startMove(-100, -10);
}
function startMove(iTarget, iSpeed) {
clearInterval(iTimer);
iTimer = setInterval(function() {
if (oDiv1.offsetLeft == iTarget) {
clearInterval(iTimer);
} else {
oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
</html>