原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問題
更新時間：2014年01月08日 16:12:16 作者：
設(shè)置透明度問題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點
在日常開發(fā)的網(wǎng)站中，常常會用到設(shè)置透明度問題，最簡單的就是圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點：
1 透明度樣式設(shè)置
透明度在IE瀏覽器和其他相關(guān)瀏覽器中的設(shè)置方法不太相同，IE使用filter：alpha屬性，firefox使用opactiy屬性，下面示例設(shè)置透明度為30%：
IE：filter: alpha(opacity:30)；
firefox：opacity(0.3)；
2 原生js設(shè)置透明度
為了兼容IE與其他瀏覽器對透明度的設(shè)置，我們需要對以上兩種樣式分別進(jìn)行設(shè)置；
復(fù)制代碼 代碼如下:
var alpha = 30; //透明度值變量
var oDiv = document.getElementById('div1'); //獲取DOM元素對象
oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //設(shè)置IE的透明度
oDiv.style.opacity = alpha / 100; //設(shè)置fierfox等透明度，注意透明度值是小數(shù)
3 jQuery設(shè)置透明度
jQuery中對透明度的設(shè)置進(jìn)行了整合，兼容IE和其他瀏覽器，修改opactiy屬性值即可，值為小數(shù)，因此只需要設(shè)置一次即可；
復(fù)制代碼 代碼如下:
$(function(){
$("#div1").css("opacity","0.3"); //設(shè)置透明度
});
4 一個示例
示例使用原生js實現(xiàn)一個div的淡入淡出效果；鼠標(biāo)移入div區(qū)域，透明度為100%，鼠標(biāo)移出div區(qū)域透明度為30%，同時用時間控制透明度轉(zhuǎn)換效果；
復(fù)制代碼 代碼如下:
window.onload=function()
{
var oDiv = document.getElementById('div1');//獲取div的DOM對象
oDiv.onmouseover = function() //鼠標(biāo)移入方法
{
startMove(100);
};
oDiv.onmouseout = function() //鼠標(biāo)移出方法
{
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+')'; //設(shè)置IE透明度
oDiv.style.opacity = alpha / 100; //設(shè)置其他瀏覽器
}
},30);
}
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Javascript實現(xiàn)秒表計時游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
小程序getLocation需要在app.json中聲明permission字段
這篇文章主要介紹了小程序getLocation需要在app.json中聲明permission字段，個別需要獲取用戶地理位置的在開發(fā)者工具調(diào)試時會出現(xiàn)getLocation需要在app.json中聲明permission字段 ，下面我們就一起來解決一下2019-04-04
本文主要介紹了js中的循環(huán)方式及各種遍歷的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
有這么一個需求，開發(fā)了一套系統(tǒng)，當(dāng)用戶離開桌面或者一段時間不操作的話，需要把該系統(tǒng)所有打開頁面鎖定起來，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-06-06
echarts學(xué)習(xí)筆記之圖表自適應(yīng)問題詳解
最近發(fā)現(xiàn)一個問題，echarts圖初始化后不能自適應(yīng)瀏覽器的縮放，所以下面這篇文章就來給大家介紹了關(guān)于echarts圖表自適應(yīng)問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
Typescript 中的 interface 和 type 到底有什么區(qū)別詳解
這篇文章主要介紹了Typescript 中的 interface 和 type 到底有什么區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
js提示框替代系統(tǒng)alert,自動關(guān)閉alert對話框的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s提示框替代系統(tǒng)alert,自動關(guān)閉alert對話框的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
es6 for循環(huán)中l(wèi)et和var區(qū)別詳解
這篇文章主要介紹了es6 for循環(huán)中l(wèi)et和var區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家詳細(xì)介紹了原生JS層疊輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05