為什么計時器運(yùn)行幾遍后div就滿屏幕跑了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
*{margin:0;padding:0;}
#p1{filter:alpha(opacity:30);opacity:0.3;}
</style>
<script type="text/javascript"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id='p1' style="width:300px;height:200px;position:relative;top:0;left:-320px;background:#F00;border:10px solid #CCC"><span style="display:block;position:absolute;top:50px;right:-50px;width:50px;height:50px;text-align:center;background:blue;color:#FFF;">start</span></div>
<script>
window.onload=function(){
var p1=document.getElementById('p1');
p1.onmouseover=function(){startMove(0);}
p1.onmouseout=function(){startMove(-320);}
}
/*var p1=document.getElementById('p1');
? ?timer=null;//這兒的timer只能作為全局變量
function startMove(){
clearInterval(timer);
var p1=document.getElementById('p1');
timer=setInterval(function(){
if(p1.offsetLeft==0){clearInterval(timer);}
else{p1.style.left=p1.offsetLeft+10+'px';
}},30);
? }
? ?function stopMove(){
clearInterval(timer);
var p1=document.getElementById('p1');
timer=setInterval(function(){
if(p1.offsetLeft==-300){clearInterval(timer);}
else{p1.style.left=p1.offsetLeft-10+'px';
}},30);
}*/
var timer=null;
? ?alpha=30;
timer1=null;
? ?
function startMove(itarget){?
clearInterval(timer);
var p1=document.getElementById('p1');
? ?speed=0;
speed=(itarget-p1.offsetLeft)/10;
speed=speed?Math.ceil(speed):Math.floor(speed);
timer=setInterval(function(){?
if(p1.offsetLeft==itarget){clearInterval(timer);}
else{p1.style.left=p1.offsetLeft+speed+'px';
if(Math.ceil(p1.offsetLeft)==itarget||Math.floor(p1.offsetLeft)==itarget){
p1.style.left=itarget+'px';
}
}},30);
}
/* function opacityMove(itarget){
clearInterval(timer);
var p1=document.getElementById('p1');
? ? speed=0;
if(alpha>itarget){speed=-10;}else{speed=10;}
timer=setInterval(function(){
if(alpha==itarget){clearInterval(timer);}
else{
alpha=speed+alpha;
p1.style.filter="alpha(opacity:'+alpha+')";
p1.style.opacity=alpha/100;
}
},30)
} */
</script>
</body>
</html>
2016-08-30
剛學(xué)到JS。。。你都用上jQUERY了