欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問(wèn)題

 更新時(shí)間:2014年01月08日 16:12:16   作者:  
設(shè)置透明度問(wèn)題,比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問(wèn)題和注意點(diǎ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è)置;

復(fù)制代碼 代碼如下:

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è)置一次即可;
復(fù)制代碼 代碼如下:

$(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)換效果;
復(fù)制代碼 代碼如下:

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)文章

最新評(píng)論