<!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效果就無效了，鼠標移出并不能回去了，請問怎么回事呢
2015-12-02
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); ????????}