透明度的設置問題
阿新 • • 發佈：2017-09-04
rtm 相關 兼容 mouseover 恢復 interval margin rip pac
1、透明度的樣式設置：
透明度在IE瀏覽器和其他相關瀏覽器中的設置方法不太相同，IE使用filter：alpha屬性，firefox使用opactiy屬性；
filter:alpha(opacity:30);
opacity:0.3;
2、原生js設置透明度
為了兼容IE與其他瀏覽器對透明度的設置，代碼如下：
var alpha=30;
var mydiv=document.getElementById("myDiv");
mydiv.style.filter="alpha(opacity:"+alpha+")";
mydiv.style.opacity=alpha/100;
3、jQuery設置透明度
jQuery中對透明度的設置進行了整合，兼容IE和其他瀏覽器，修改opactiy屬性值即可，值為小數，因此只需要設置一次即可；
代碼如下:
$(function(){
$("#div1").css("opacity","0.3"); //設置透明度
});
4、舉例：鼠標移入，透明度變小；鼠標移出，恢復。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js透明度動畫</title> <style type="text/css"> *{margin:0;padding:0;} div{ width:200px; height:200px; background-color:#f00; filter:alpha(opacity:100);/*IE瀏覽器*/ opacity:1;/*Firefox瀏覽器*/ } </style> <script> window.onload=function(){ var mydiv=document.getElementById("myDiv"); mydiv.onmouseover=function(){//鼠標移入 startMove(30); } mydiv.onmouseout=function(){//鼠標移出 startMove(100); } } var timer=null; var alpha=30;//透明度值變量 function startMove(iTarget){ var speed=0; var mydiv=document.getElementById("myDiv"); clearInterval(timer); timer=setInterval(function(){ if(alpha>iTarget){ speed= -10; }else{ speed= 10; } if(iTarget==alpha){ clearInterval(timer); }else{ alpha+=speed; mydiv.style.filter="alpha(opacity:"+alpha+")";//設置IE透明度 mydiv.style.opacity=alpha/100;//設置Firefox透明度，值為小數，其實可以寫成alpha*0.01 } },50); } </script> </head> <body> <div id="myDiv"></div> </body> </html>
透明度的設置問題