js实现图片渐隐渐显的切换效果

来源：互联网发布：网络推广渠道分析编辑：程序博客网时间：2024/05/07 12:32

原帖地址：http://topic.csdn.net/u/20111115/09/836eeb82-ab49-41a8-a21f-26a232be1194.html?67769

楼主希望对DIV层实现渐显渐隐，看了楼下的解答，不禁感叹js比jQuery苦逼啊！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片渐隐渐显的切换效果</title><script type="text/javascript">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);}}};</script></head><body><div id="test" style="width:300px; height:250px"><iframe scrolling="no" width="300" height="250" frameborder="0" src="http://hi.csdn.net/attachment/201111/15/0_1321345637630X.gif"></iframe></div></body></html>