<!DOCTYPE html>
<charset="UTF-8">
<html>
<head>
<title>yundong</title>
<style>
body,div,span{
margin: 0;
padding: 0;
}
#div1{
height: 200px;
width: 200px;
position: relative;
top: 0;
left: -200px;
background-color:red;
opacity: 0.7;
}
#share{
height: 50x;
width: 20px;
position: absolute;
left: 200px;
top: 75px;
background-color:blue;
opacity: 0.9;
}
</style>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
<script type="text/javascript">
window.onload=function(){
var oDIV=document.getElementById("div1");
oDIV.onmouseover=function(){
onMove();
}
oDIV.onmouseout=function(){
stopMove();
}
}
function onMove(){
clearInterval(timer);
var oDIV=document.getElementById("div1");
var timer=null;
timer=setInterval(function(){
if (oDIV.offsetLeft==0) {
clearInterval(timer);
}
else{
oDIV.style.left=oDIV.offsetLeft+10+"px";
}
},30)
}
function stopMove(){
clearInterval(timer);
var oDIV=document.getElementById("div1");
var timer=null;
timer=setInterval(function(){
if (oDIV.offsetLeft==-200) {
clearInterval(timer);
}
else{
oDIV.style.left=oDIV.offsetLeft-10+"px";
}
},30)
}
</script>
</body>
</html>