js控制淡入淡出示例代码

前端技术 2023/08/09 JavaScript
相对来说可以让初学者看一下，并不太实用，可能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>

本文地址：https://www.stayed.cn/item/711

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案