透明度的設置問題
阿新 • • 發佈: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>
透明度的設置問題