Question

我正在努力使每个方格的10个方格同时淡入，每个方格具有不同的不透明度值。到目前为止，我有10个方块同时淡入，但都具有相同的不透明度值1。我不确定实现下一步的最佳方法，我需要使用核心JavaScript（没有任何类型的库）。

这是我到目前为止所做的：

var color;
var count = 0;

function init() {
    color = document.querySelectorAll(".box");
    setInterval(fadeColor, 1000);
}

function fadeColor() {
    setInterval(fade, 50);
}

function fade() {
    for(i=0; i < color.length; i++){
        color[i].style.opacity = count;
    }

    count = count + 0.01;
}

window.addEventListener("load", init, false);

Answer 1

而不是color[i].style.opacity = count你可以尝试这样的事情

var opacity = color[i].style.opacity;
if (opacity < opacity_levels[i]) {
    color[i].style.opacity = opacity + 0.01;
}

其中opacity_levels是每个元素所需的不透明度级别的数组。

Answer 2

这是一个生成十个框的脚本，然后将它们淡化为随机的不透明度。此方法的基础是将不透明度端点存储为每个框对象的属性。程序循环遍历十个框，检查是否已到达终点。如果是，程序将跳过此框以进一步更改为不透明度。当所有十个盒子都到达终点时程序停止。

您可以再次单击“再次运行”按钮再次运行它。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Opacity fade</title>
<script type="text/javascript">
 var totDivs=new Array(), allDivs=new Array(); // global
 function init()
  { // gather divs
      totDivs=document.getElementById("wrap").getElementsByTagName("div");
      var i, endP;
     // discard outer div from collection 
      for(i=0;i<totDivs.length;i++)
       { if(totDivs[i].className !="ht" && totDivs[i].id !="block2" && totDivs[i].id !="retry" )
           { allDivs[allDivs.length]=totDivs[i]; }                 
       }    
     //   
      var thisCode, newNode, elemD;
      for(i=0;i<allDivs.length;i++) 
       {   allDivs[i].end=Math.random();
           allDivs[i].style.opacity= allDivs[i].currentOpacity =0.1;           
           allDivs[i].skip=false;
           endP=parseInt(allDivs[i].end*100)/100;          
          // add opacity figure into existing div     
           newNode=document.createTextNode(endP);  
           var elemD=document.createElement("div"); 
           elemD.appendChild(newNode);                
           allDivs[i].parentNode.appendChild(elemD);                    
       } 
   //    
    setTimeout(fadeIn,500);     
  } 
 // -----
  function fadeIn()
   { var i, thisStep, counter=0;
     for(i=0;i<10;i++) 
      { thisStep=allDivs[i].currentOpacity+0.05;
        if(thisStep<allDivs[i].end)
          { allDivs[i].style.opacity = allDivs[i].currentOpacity = thisStep; }         
        else
          { if(allDivs[i].skip==false) { counter++; allDivs[i].skip==true; }                            
           }
      } 
    if(counter<10) { setTimeout(fadeIn,100); }
    else { document.getElementById("block2").innerHTML='<div class="a14B">Finished</div>'; }

  }
//     
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:11px; color:#000; text-align:center; margin:3px 0px; }
form { margin-top:50px; }
#wrap { border:1px solid #CCC; position:relative; top:0px; left:0px; width:700px; height:400px; margin:50px; padding:20px;   }
#block2 { z-index:2; border:1px solid #000; width:100%; height:20px; background-color: #FF0; margin:15px -15px; }
.blk  { z-index:5; width:50px; height:50px; border:1px solid #00F; opacity:0; background-color:#000;  }
.ht   { float:left; width:50px; height:65px; margin-right:10px;  }
.a14B { position:absolute; top:0px; right:2px; font-size:14px; font-weight:bold; color:#000; }
#a0 { background-color:#AAA; }
#a1 { background-color:#F00; }
#a2 { background-color:#FF0; }
#a3 { background-color:#0F0; }
#a4 { background-color:#0FF; }
#a5 { background-color:#00F; }
#a6 { background-color:#F0F; }
#a7 {  background-color:#666; }
#a8 {  background-color:#000; }
#a9 {  background-color:#000080; }
</style>
</head>

<body onload="init()">

<div id="wrap">
  <script type="text/javascript">
   var i, build="";
   for(i=0;i<10;i++) { build+='<div  class="ht">\n<div id="a'+i+'" class="blk"><\/div>\n<\/div>\n'; }
  // write to page
   document.write(build); 
  </script>
  <div id="block2">
  </div>
  <div id="retry">
    <input type="button" onclick="location.reload()" value="Run it again" name="b1"></div>
</div>
<!-- end wrap -->

</body>

</html>

不透明度一次淡入多个div，全部具有不同的不透明度值。

2 个答案: