window.onload=function(){
var oDiv = document.getElementById('div');
var timer= null;
oDiv.onmouseover=function(){
startMove1();
}
oDiv.onmouseout=function(){
startMove2();
}
function startMove1(){
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==0){
clearInterval(timer);
}else{
console.log(111);
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
},30);
}
function startMove2(){
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==-150){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
},30);
}
}
<div id="div">
<div id="div1">分享到</div>
</div>
首先,你的onmouseout的确是执行了的,只是你的style在js控制后你没有看到效果
根据的你代码我脑补你是要让你的div移动对吧,如果你要让css的left生效的话就一定要给这个元素添加position
属性才能让left
有效:
谁说onmouseout没有执行呢???你可以在事件中加一个console.log打印看看,分别是执行的很好。我想你的问题是为什么oDiv就不动呢?
是啊,它为什么就不动呢?明明有设置它的位置的oDiv.style.left=oDiv.offsetLeft-10+'px';
这要涉及到CSS的问题,因为当前oDiv的的定位方式是“流模式”,它的定位同浏览器实时计算所得,JS代码无法更改它的位置。如果你想要看看效果,可以把定位方式设置为position:absolute即可。刷新页面可以看到你的DIV在跳来跳去。
问题1:
你是改变元素的 left 属性实现动画效果,至少 #div 元素是绝对或者固定定位的
问题2:
你在 mouseover 上结束动画的条件是 left 为 0,此外都是移动的。那么是不是说 left 默认不能设置为 0,否则你的动画不会运行。
问题3;
mouseout 上结束动画的条件是 left 为 -150, 按你每次 +10 和 -10 的移动方式,那么 left 默认设置必须是 10 或者 10 的倍数