鼠标移入和移出没有变化

来源:2-1 JS速度动画

qq_慕移动0355785

2019-07-17 15:20

<style>			body,div,span{				margin:0;				padding:0;			}			#div1{				width:200px;				height:200px;				background:red;				position:relative;				left:-200px;				top:0;			}			#div1 span{				width: 20px;				height: 50px;				background: blue;				position: absolute;				left: 200px;				top: 75px;			}		</style>		<script>			window.onload=function(){				var oDiv=document.getElementById('div1');				oDiv.onmousemove=function(){					startMove(10,0);				}				oDiv.onmouseout=function(){					startMove(-10,-200);				}			}			var timer=null;			function startMove(iTarget){				clearInterval(timer);				var oDiv=document.getElementById('div1');				timer=setInterval(function(){					var speed=0;					if(oDiv.offsetLeft>iTarget){						speed=-10;					}					else {						speed=10;				}				if(oDiv.offsetLeft==iTarget){					clearInterval(timer);				}				else{					oDiv.style.left=oDiv.offsetLeft+speed+'px';				}			},30)			}		</script>	</head>	<body>		<div id="div1"><span id="share">分享</span></div>			</body>


写回答 关注

1回答

  • 慕九州0567575
    2019-07-23 09:24:15

    function startMove(iTarget)函数里你只有一个参数,但是调用的时候你传了两个 startMove(10,0);     

    改成只传目标值就可以了;

    oDiv.onmousemove=function(){                    startMove(0);                }               
    oDiv.onmouseout=function(){                 startMove(-200);                }


JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题