圖片漸隱漸顯的切換效果

window.onload = function()

{

var testDiv = document.getElementById('test');

testDiv.style.opacity = 1.0;

testDiv.onmouseover = show;

testDiv.onmouseout = hide;

};

var interval1, interval2;

var show = function()

{

if(interval2) {

//這里是為了當鼠標在Div漸隱的過程中移到Div上圖片立即慢慢重現

clearInterval(interval2);

}

i = document.getElementById('test').style.opacity*100;

interval1 = setInterval("showRound()",20);

};

var showRound = function()

{

i++;

var testDiv = document.getElementById('test');

if(testDiv.style.opacity != 1.0) {

testDiv.style.opacity = i/100;

} else {

if(interval1) {

clearInterval(interval1);

}

}

}

var hide = function()

{

if(interval1) {

//這里是為了當鼠標在Div漸現的過程中從Div上移走圖片立即慢慢消失

clearInterval(interval1);

}

j = document.getElementById('test').style.opacity*100;

interval2 = setInterval("hideRound()",20);

};

var hideRound = function()

{

j--;

var testDiv = document.getElementById('test');

if(testDiv.style.opacity != 0.0) {

testDiv.style.opacity = j/100;

} else {

if(interval2) {

clearInterval(interval2);

}

}

};

">

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html图片渐隐渐显,js实现图片切换效果渐隐渐显的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。