JS透明度渐变效果-优快云博客

如果有可能建议使用css3实现类似功能，具体可以参阅css实现透明度渐变效果一章节。

下面分享一个使用js实现的此功能，兼容性更好一些，代码实例如下:

     
     
      
      
       
       
        
         
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
            
              17 
             
            
              18 
             
            
              19 
             
            
              20 
             
            
              21 
             
            
              22 
             
            
              23 
             
            
              24 
             
            
              25 
             
            
              26 
             
            
              27 
             
            
              28 
             
            
              29 
             
            
              30 
             
            
              31 
             
            
              32 
             
            
              33 
             
            
              34 
             
            
              35 
             
            
              36 
             
            
              37 
             
            
              38 
             
            
              39 
             
            
              40 
             
            
              41 
             
            
              42 
             
            
              43 
             
            
              44 
             
            
              45 
             
            
              46 
             
            
              47 
             
            
              48 
             
            
              49 
             
            
              50 
             
            
              51 
             
            
              52 
             
            
              53 
             
            
              54 
             
            
              55 
             
            
              56 
             
            
              57 
             
            
              58 
             
             
              
              <!doctype html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              title 
              >js实现透明度渐变效果</ 
              title 
              > 
              
              
              < 
              style  
              type 
              = 
              "text/css" 
              > 
              
              
              div { 
              
              
                 
              width: 150px; 
              
              
                 
              height: 150px; 
              
              
                 
              background-color: #8B0000; 
              
              
                 
              float: left; 
              
              
                 
              margin: 10px; 
              
              
                 
              border: 3px solid #599; 
              
              
                 
              filter: alpha(opacity: 30); 
              
              
                 
              opacity: 0.3; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script 
              > 
              
              
              window.onload = function() { 
              
              
                 
              var aDiv = document.getElementsByTagName("div"); 
              
              
                 
              for (var index = 0; index < aDiv.length; index++) { 
              
              
                   
              aDiv[index].timer = null; 
              
              
                   
              aDiv[index].alpha = 30; 
              
              
                   
              aDiv[index].onmouseover = function () { 
              
              
                     
              startMove(this, 100); 
              
              
                   
              } 
              
              
                   
              aDiv[index].onmouseout = function () { 
              
              
                     
              startMove(this, 30); 
              
              
                   
              } 
              
              
                 
              } 
              
              
              } 
              
              
                 
              
              
              function startMove(obj, iTarget) { 
              
              
                 
              
              
                 
              clearInterval(obj.timer); 
              
              
                 
              
              
                 
              obj.timer = setInterval(function() { 
              
              
                   
              var speed = (iTarget - obj.alpha) / 10; 
              
              
                   
              speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
              
              
                   
              if (obj.alpha == iTarget) { 
              
              
                     
              clearInterval(obj.timer); 
              
              
                   
              } else { 
              
              
                     
              obj.alpha += speed; 
              
              
                     
              obj.style.filter = "alpha(opacity:" + obj.alpha + ")"; 
              
              
                     
              obj.style.opacity = obj.alpha / 100; 
              
              
                   
              } 
              
              
                 
              }, 30); 
              
              
              } 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
                 
              < 
              div 
              ></ 
              div 
              > 
              
              
                 
              < 
              div 
              ></ 
              div 
              > 
              
              
                 
              < 
              div 
              ></ 
              div 
              > 
              
              
                 
              < 
              div 
              ></ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >