js滤镜渐变问题


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript">   
<!--  
   window.onload=function(){
       var obj=document.getElementById("test");
       obj.onmouseover=function(){
           highlight(this,100,10);
       }
       obj.onmouseout=function(){
           clearTimeout(this.stop);
           highlight(this,0,-10)
       }
   } 
   function highlight(obj,max,dis){
       if (obj.stop) clearTimeout(obj.stop);
       if (obj.filters){
           if(obj.filters.alpha.opacity==max){
           obj.filters.alpha.opacity=max;
               clearTimeout(obj.stop); 
               return;
           }
           obj.filters.alpha.opacity+=dis;
       } else {
           if(obj.style.opacity==(max/100)){
               clearTimeout(obj.stop); 
               return;
           }
           obj.style.opacity=(obj.style.opacity*100+dis)/100;
       }
       obj.stop=setTimeout(function(){ highlight(obj,max,dis) },50);
   }
-->   
</script>
</head>
<body>
   <div style="border:1px solid #000;width:150px;height:100px;">
       <div id="test" style="width:150px;height:100px;background-color:#FFC78E;filter:alpha(opacity=0);opacity:0;cursor:point;"></div>
   </div></body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script language="javascript">    
       window.onload=function(){
           var obj=document.getElementById("test");
           obj.onmouseover=function(){
               highlight(this,100,10);
           }
           obj.onmouseout=function(){
               clearTimeout(this.stop);
               highlight(this,0,-10)
           }
       } 
       function highlight(obj,max,dis){
           if (obj.stop) clearTimeout(obj.stop);
           if (obj.filters){
               if(obj.filters.alpha.opacity==max){
                   clearTimeout(obj.stop); 
                   return;
               }
           } else {
               if(obj.style.opacity==(max/100)){
                   clearTimeout(obj.stop); 
                   return;
               }
           }
           obj.filters?(obj.filters.alpha.opacity+=dis):(obj.style.opacity=parseFloat(obj.style.opacity)+parseFloat(dis/100));
           obj.stop=setTimeout(function(){ highlight(obj,max,dis) },50);
       }
    </script>
    </head>
    <body>
       <div style="border:1px solid #000;width:150px;height:100px;">
           <div id="test" style="width:150px;height:100px;background-color:#FFC78E;filter:alpha(opacity=0);opacity:0;cursor:hand;"></div>
       </div>
    </body>
    </html>
    试试吧,哈哈
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script language="javascript">    
       window.onload=function(){
           var obj=document.getElementById("test");
           obj.onmouseover=function(){
               highlight(this,100,10);
           }
           obj.onmouseout=function(){
               clearTimeout(this.stop);
               highlight(this,0,-10)
           }
       } 
       function highlight(obj,max,dis){
           if (obj.stop) clearTimeout(obj.stop);
           if (obj.filters){
               if(obj.filters.alpha.opacity==max){
                   clearTimeout(obj.stop); 
                   return;
               }
           } else {
               if(obj.style.opacity==(max/100)){
                   clearTimeout(obj.stop); 
                   return;
               }
           }
           obj.filters?(obj.filters.alpha.opacity+=dis):(obj.style.opacity=parseFloat(obj.style.opacity)+parseFloat(dis/100));//改的这句话
           obj.stop=setTimeout(function(){ highlight(obj,max,dis) },50);
       }
    </script>
    </head>
    <body>
       <div style="border:1px solid #000;width:150px;height:100px;">
           <div id="test" style="width:150px;height:100px;background-color:#FFC78E;filter:alpha(opacity=0);opacity:0;cursor:hand;"></div>
       </div>
    </body>
    </html>
    加点注释 :-)
      

  3.   

    楼上两位都对，
    obj.style.opacity是字符串类型，
    强制转换的时候是被转换成了整数0。另外，还可以这样作 。obj.filters ? (obj.filters.alpha.opacity += dis) : (obj.style.opacity = Number(obj.style.opacity) + (dis / 100));