三個正方形方塊，鼠標滑過會改變寬高透明度，為什么寫成for循環就不能運行，而分開寫就能正常運行呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度運動</title>
? ? <script src="js/move.js"></script>
</head>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
}
li{
list-style:none;
width: 200px;
height: 200px;
background: red;
margin-bottom:20px;
filter:alpha(opacity:70);
opacity:0.3;
border:2px solid black;
fontSize:30px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var lis = document.getElementsByTagName("li");
var uls = document.getElementsByTagName("ul");
//為什么寫成for循環就不能運行，而分開寫就能正常運行呢
for(var j=0; j<lis.length; j++)
{
? ?lis[j].indexTimer ?= null;
lis[j].onmouseover=function(){
move(lis[j],{width:400, height:400, opacity:100})};
? ?lis[j].onmouseout=function(){
move(lis[j],{width:200, height:200, opacity:30})};
}
/*lis[0].indexTimer ?= null;
lis[1].indexTimer ?= null;
lis[2].indexTimer ?= null;
lis[0].onmouseover=function(){
move(lis[0],{width:400, height:400, opacity:100})};
lis[0].onmouseout=function(){
? move(lis[0],{width:200, height:200, opacity:30})};
??
lis[1].onmouseover=function(){
move(lis[1],{width:400, height:400, opacity:100})};
lis[1].onmouseout=function(){
move(lis[1],{width:200, height:200, opacity:30})};
lis[2].onmouseover=function(){
move(lis[2],{width:400, height:400, opacity:100})};
lis[2].onmouseout=function(){
move(lis[2],{width:200, height:200, opacity:30})};*/
}
function move(obj,json,fn)//
{
? clearInterval(obj.indexTimer);//清除每個li的定時器 ?
? obj.indexTimer=setInterval(
? function()
? { ??
? var getArr = 0;
? var flag = true;
? for(var attr in json)
{
//取屬性值
? if(attr=="opacity")
? {
?getArr =Math.round((parseFloat(getStyle(obj,attr)))*100);
? }
? else
? {
getArr=parseInt(getStyle(obj,attr));
? }
? //根據目標值計算速度
? var speed=(json[attr]-getArr)/20;
? speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? if(attr=="opacity")
{
obj.style.opacity =(getArr+speed)/100;
obj.style.filter = "alpha(opacity:'+(getArr+speed)+')" ;
}
else{ obj.style[attr] = getArr+speed + "px";}
if(getArr!=json[attr])
{
?flag=false; ?? ? ??
?}
? ?
}
if(flag == true)
?{?
clearInterval(obj.indexTimer);
?if(fn){fn();};
?}
? },30);
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
</script>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
2016-10-30
<!DOCTYPE?html> <html> <head> <meta?charset="utf-8;"> <title>透明度運動</title> ??? </head> <style?type="text/css"> body,div{ margin:?0; padding:?0; } li{ list-style:none; width:?200px; height:?200px; background:?red; margin-bottom:20px; filter:alpha(opacity:70); opacity:0.3; border:2px?solid?black; fontSize:30px; } </style> <script?type="text/javascript"> window.onload=function() { var?lis?=?document.getElementsByTagName("li"); var?uls?=?document.getElementsByTagName("ul"); //為什么寫成for循環就不能運行，而分開寫就能正常運行呢 for(var?j=0;?j<lis.length;?j++) { ???lis[j].indexTimer??=?null; lis[j].onmouseover=function(){ move(this,{width:400,?height:400,?opacity:100})}; ???lis[j].onmouseout=function(){ move(this,{width:200,?height:200,?opacity:30})}; } } var??indexTimer=null; function?move(obj,json,fn)// { ??clearInterval(obj.indexTimer);//清除每個li的定時器?? ??obj.indexTimer=setInterval( ??function() ??{??? ??var?getArr?=?0; ??var?flag?=?true; ??for(var?attr?in?json) { //取屬性值 ??if(attr=="opacity") ??{ ?getArr?=Math.round((parseFloat(getStyle(obj,attr)))*100); ??} ??else ??{ getArr=parseInt(getStyle(obj,attr)); ??} ??//根據目標值計算速度 ??var?speed=(json[attr]-getArr)/20; ??speed=speed>0?Math.ceil(speed):Math.floor(speed); ????if(attr=="opacity") { obj.style.opacity?=(getArr+speed)/100; obj.style.filter?=?"alpha(opacity:'+(getArr+speed)+')"?; } else{?obj.style[attr]?=?getArr+speed?+?"px";} if(getArr!=json[attr]) { ?flag=false;???????? ?} ??? } if(flag?==?true) ?{? clearInterval(obj.indexTimer); ?if(fn){fn();}; ?} ??},30); } function?getStyle(obj,attr) { if(obj.currentStyle) { return?obj.currentStyle[attr]; } else { return?getComputedStyle(obj,false)[attr]; } } </script> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>2016-10-30
for循環的時候用this指定，