js控制淡入淡出示例代码

2013-11-13 09:07 来源: 站长圈点击:

相对来说可以让初学者看一下，并不太实用，可能jquery4条语句就能解决，但是原生相对有参照性，了解最终原理才是关键。

复制代码代码如下:

<!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>

<style type="text/css">

body {margin:0;padding:0;color:#000000;}

#div_test {

width: 100%;

height: 100%;

background-color: #000000;

position:absolute;

filter:Alpha(Opacity=0)

}

</style>

<script type="text/javascript">

var i = 100;

function $(id) {return document.getElementById(id);}

function chang_display() { i--;

var div = $('div_test');

div.style.filter = "Alpha(Opacity="+i+")";

div.style.opacity = i / 100;

if ( i== "0")

{document.getElementById('div_test').style.display="none";//隐藏

exit

}

}

/*控制div隐藏*/

function hid() {

setInterval(chang_display, 1);

}

</script>

</head>

<body>

<div id="div_test" onclick="hid()" style="width:200px;height:200px;"></div>

<div><a href="http://bbs.csdn.com">123</a>123123</div>

</body>

<script defer="defer">

var j = 0;

function $(id) {return document.getElementById(id);}

function turn_display()

{ j++;

var div = $('div_test');

div.style.filter = "Alpha(Opacity="+j+")";

div.style.opacity = j / 100;

if ( j== "0")

{document.getElementById('div_test').style.display="none";//隐藏

exit

}

}

setInterval(turn_display, 1);

</script>

</html>