为什么按照老师说的将移进移除的代码合并为一个,提出参数传入后执行没反应?谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS动画</title>
<style type="text/css">
body,div,span{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: pink;
position: relative;
left: -200px;
top:0;
}
#div1 span{
width: 20px;
height: 50px;
background:yellow ;
position: absolute;
left: 200px;
top:75px;
}
</style>
<!--利用计时器,加上控制元素位置,实现运动效果-->
<script >
window.onload=function(){
var oDiv=document.getElementById('div1')
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout=function(){
startMove(-10,-200);
}
}
var timer=null;
//两个代码很相似,可以合并为一个,把不同的部分作为参数提出来
// function startMove(){
// clearInterval(timer) //一进来先把定时器清理掉,避免打开多个定时器使速度家加快
// var oDiv=document.getElementById('div1')
// timer=setInterval(function(){
// if(oDiv.offsetLeft==0){clearInterval(timer)}
// else{oDiv.style.left=oDiv.offsetLeft+1+'px'}
// },30)
// }
// function startMove1(){
// clearInterval(timer) //一进来先把定时器清理掉,避免打开多个定时器使速度家加快
// var oDiv=document.getElementById('div1')
// timer=setInterval(function(){
// if(oDiv.offsetLeft==-200){clearInterval(timer)}
// else{oDiv.style.left=oDiv.offsetLeft-1+'px'}
// },30)
// }
function startMove(speed,iTarget){
clearInterval(timer) //一进来先把定时器清理掉,避免打开多个定时器使速度家加快
var oDiv=document.getElementById('div1')
timer=setInterval(function(){
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>
</html>