Javascript实现div层渐隐效果的方法

2024-05-06 16:21:03

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了Javascript实现div层渐隐效果的方法,涉及javascript操作页面元素与样式变化的相关技巧,需要的朋友可以参考下

本文实例讲述了Javascript实现div层渐隐效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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>Test Alpha</title>

<style type="text/css">

#show {

background:#ffff66;

font-size:12px;

height:200px;

width:300px;

left:300px;

position:absolute;

text-align:center;

filter:alpha(opacity=0);

}

</style>

</head>

<body onload={document.getElementById('show').style.opacity=0;}>

<div id="show"></div>

<button onclick=fun()>button</button>

</body>

<script>

function fun(){

var div=document.getElementById('show');

div.style.opacity=1;

hidden(document.getElementById("show"),1,-0.01);

}

function hidden(o,i,s){

t=setInterval(function(){

i+=s;

o.style.opacity=i;

if(i<0)window.clearInterval(t);

},1);

};

</script>

</html>