记录我的学习与生活
广告消逝效果
做了一个广告的消逝效果,就慢慢的消逝,没有加透明度的渐变。
代码如下
<!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” xml:lang=”zh” lang=”zh” dir=”ltr”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<style type=”text/css”>
html,body,div{
margin: 0;
padding: 0;
width: 100%;
}
</style>
<script type=”text/javascript”>
var Speed = 5; //设置速度
var ad = null;
var timer = null;
hidden = function(){
ad = document.getElementById(’ad’);
setTimeout(”timer = setInterval(’slowhidden();’, 1);”, 3000);
}
slowhidden = function(){
ad.style.height = ad.clientHeight – Speed + ‘px’;
if(ad.clientHeight <= Speed){
clearInterval(timer);
ad.style.display=”none”;
}
}
</script>
</head>
<body onload=”hidden();”>
<div id=”ad” style=”height: 400px; background:#D23; overflow:hidden”></div>
<div style=”height: 1000px;background:#FF0;”></div>
</body>
</html>