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

原帖地址: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>

 
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页