原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問(wèn)題
在日常開(kāi)發(fā)的網(wǎng)站中,常常會(huì)用到設(shè)置透明度問(wèn)題,最簡(jiǎn)單的就是圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問(wèn)題和注意點(diǎ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與其他瀏覽器對(duì)透明度的設(shè)置,我們需要對(duì)以上兩種樣式分別進(jìn)行設(shè)置;
var alpha = 30; //透明度值變量
var oDiv = document.getElementById('div1'); //獲取DOM元素對(duì)象
oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //設(shè)置IE的透明度
oDiv.style.opacity = alpha / 100; //設(shè)置fierfox等透明度,注意透明度值是小數(shù)
3 jQuery設(shè)置透明度
jQuery中對(duì)透明度的設(shè)置進(jìn)行了整合,兼容IE和其他瀏覽器,修改opactiy屬性值即可,值為小數(shù),因此只需要設(shè)置一次即可;
$(function(){
$("#div1").css("opacity","0.3"); //設(shè)置透明度
});
4 一個(gè)示例
示例使用原生js實(shí)現(xiàn)一個(gè)div的淡入淡出效果;鼠標(biāo)移入div區(qū)域,透明度為100%,鼠標(biāo)移出div區(qū)域透明度為30%,同時(shí)用時(shí)間控制透明度轉(zhuǎn)換效果;
window.onload=function()
{
var oDiv = document.getElementById('div1');//獲取div的DOM對(duì)象
oDiv.onmouseover = function() //鼠標(biāo)移入方法
{
startMove(100);
};
oDiv.onmouseout = function() //鼠標(biāo)移出方法
{
startMove(30);
};
}
var timer = null;//時(shí)間對(duì)象
var alpha = 30;//透明度初始值
function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
clearInterval(timer);//清空時(shí)間對(duì)象
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)文章
js實(shí)現(xiàn)從右往左勻速顯示圖片(無(wú)縫輪播)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)從右往左勻速顯示圖片,無(wú)縫輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06JavaScript?Promise執(zhí)行流程深刻理解
這篇文章主要介紹了JavaScript?Promise執(zhí)行流程深刻理解,他是一個(gè)構(gòu)造函數(shù),每個(gè)創(chuàng)建的promise都有各自狀態(tài)和值,且狀態(tài)初始值為pending,值為undefined2022-06-06JS如何根據(jù)條件取出數(shù)組中對(duì)應(yīng)項(xiàng)
這篇文章主要介紹了JS根據(jù)條件取出數(shù)組中對(duì)應(yīng)項(xiàng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03Javascript 代碼也可以變得優(yōu)美的實(shí)現(xiàn)方法
Javascript 代碼也可以變得優(yōu)美的一些經(jīng)驗(yàn)小結(jié)。2009-06-06JS實(shí)現(xiàn)的Unicode編碼轉(zhuǎn)換操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的Unicode編碼轉(zhuǎn)換操作,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)Unicode編碼轉(zhuǎn)換的具體操作技巧,需要的朋友可以參考下2017-04-04