萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 原生js和jquery中有關透明度設置的相關問題

原生js和jquery中有關透明度設置的相關問題

 設置透明度問題,比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設置透明度的相關問題和注意點

在日常開發的網站中,常常會用到設置透明度問題,最簡單的就是圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設置透明度的相關問題和注意點:    1 透明度樣式設置  透明度在IE浏覽器和其他相關浏覽器中的設置方法不太相同,IE使用filter:alpha屬性,firefox使用opactiy屬性,下面示例設置透明度為30%:  IE:filter: alpha(opacity:30);  firefox:opacity(0.3);    2 原生js設置透明度  為了兼容IE與其他浏覽器對透明度的設置,我們需要對以上兩種樣式分別進行設置;  代碼如下: var alpha = 30; //透明度值變量  var oDiv = document.getElementById('div1'); //獲取DOM元素對象  oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //設置IE的透明度  oDiv.style.opacity = alpha / 100; //設置fierfox等透明度,注意透明度值是小數    3 jQuery設置透明度  jQuery中對透明度的設置進行了整合,兼容IE和其他浏覽器,修改opactiy屬性值即可,值為小數,因此只需要設置一次即可;  代碼如下: $(function(){  $("#div1").css("opacity","0.3"); //設置透明度  });    4 一個示例  示例使用原生js實現一個div的淡入淡出效果;鼠標移入div區域,透明度為100%,鼠標移出div區域透明度為30%,同時用時間控制透明度轉換效果;  代碼如下: window.onload=function()  {  var oDiv = document.getElementById('div1');//獲取div的DOM對象  oDiv.onmouseover = function() //鼠標移入方法  {  startMove(100);  };  oDiv.onmouseout = function() //鼠標移出方法  {  startMove(30);  };  }    var timer = null;//時間對象  var alpha = 30;//透明度初始值  function startMove(iTarget)  {  var oDiv = document.getElementById('div1');  clearInterval(timer);//清空時間對象  timer = setInterval(function(){  var speed = 0;  if(alpha < iTarget)  {  speed =5;  }  else  {  speed = -5;  }    if(alpha == iTarget)  {  clearInterval(timer);  }  else  {  alpha +=speed; //透明度值增加效果  oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //設置IE透明度  oDiv.style.opacity = alpha / 100; //設置其他浏覽器  }  },30);  }   
copyright © 萬盛學電腦網 all rights reserved