为什么当我移动到left:200px的时候移出效果无效了
来源：2-1 JS速度动画
carolcoral
2015-12-02 12:01
<!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效果就无效了，鼠标移出并不能回去了，请问怎么回事呢
写回答
关注
1回答
-
- 李晓健
- 2015-12-02 12:47:25
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); }
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题