源自：2-1 JS速度动画
为什么当我移动到left:200px的时候移出效果无效了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运动动画效果</title>
<style>
*{margin:0px;padding: 0px;font-size: 14px;clear: both;}
#div1{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.3;
filter:alpha(opacity:30);
left: -200px;
position: relative;
top: 0px;
}
#share{
width: 20px;
height: 50px;
background-color: blue;
/*font-size: 24px;*/
/*font-weight: bold;*/
font-family: '微软雅黑';
/*float: left;*/
position: absolute;
left: 200px;
text-align: center;
top: 75px;
}
</style>
<script>
window.onload = function(){
// getdiv();
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(0);
}
oDiv.onmouseout = function(){
startMove(-200);
}
}
function getdiv(){
var oDiv = document.getElementById('div1');
// var share = document.getElementById('share');
}
var timer = null;
function startMove(itarget){
var oDiv = document.getElementById('div1');
// getdiv();
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft > itarget){
speed = -10;
}else if(oDiv.offsetLeft < itarget){
speed = 10;
}else{
speed = 0;
}
if(oDiv.offsetLeft == 0){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed +'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="div1"><span id='share'>分享</span></div>
</body>
</html>
//以上是我的代码，当我的left＝0px的时候，我的onmoueout效果就无效了，鼠标移出并不能回去了，请问怎么回事呢
提问者：carolcoral
2015-12-02 12:01
个回答
-
function startMove(itarget){
var oDiv = document.getElementById('div1');
// getdiv();
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft > itarget){
speed = -10;
}else if(oDiv.offsetLeft < itarget){
speed = 10;
}else{
speed = 0;
clearInterval(timer);
}
oDiv.style.left = oDiv.offsetLeft + speed +'px';
}, 30);
}