飘出的广告窗口，可以自动关闭

答案：<html>
<head>
<title>打开页面滑出一个定时关闭的层</title>
</head>
<body>

<div id="f_ad" style="width:60;height:60;border:1px solid #999;padding:3px;position:absolute; "> 
<span id="ad_lt" style="font-size:14px;height:23px"></span>
<input type="button" value="×" style="font-size:11px;color:#999;font-weight:bold;" title="关闭"; onclick="ad_t2=ad_t2+ad_t3"></input>
<a target="_blank"  href="/"><img border=0 src="http://www.zzzyk.com/jscss/demoimg/wall_s9.jpg"></a></div>

<script>
var ad_w=130;
var ad_h=128;
var ad_l=(document.body.clientWidth-ad_w)/2;
var ad_t=(document.body.clientHeight-ad_h)/2;
var ad_ft=1;   //过渡时间
var ad_step=50;
var ad_time=10;
var ad_t1=ad_ft*1000/ad_step;
var ad_t2=60;
var ad_t3=(ad_w-ad_t2)*ad_time/ad_ft+ad_w;
var ad_t4=0;
var ad_t5=ad_time;
var ad_t6=ad_t2;
function flashad(){
  if(ad_l<0||ad_t<0){ad_t2+=ad_t3;}
  if(ad_t2>=ad_t3){
         ad_t5=0;
         if(ad_t4>ad_t6){ad_t4-=(ad_w-ad_t6)/ad_t1;}
         else{clearTimeout(ad_timer);
         f_ad.style.display="none";
         return;}
         }
 if(ad_t2<=ad_w){ad_t4=ad_t2;ad_t5=ad_time;}
 if(ad_t2>ad_w&&ad_t2<ad_t3){ad_t5=Math.floor(ad_time-(ad_t2-ad_w)/(ad_w-ad_t6)*ad_ft);}
 ad_t2+=(ad_w-ad_t6)/ad_t1;
 f_ad.style.width=ad_t4;
 f_ad.style.height=(ad_t6*ad_h/ad_w)+(ad_t4-ad_t6)*(ad_h-ad_t6*ad_h/ad_w)/(ad_w-ad_t6);
 f_ad.style.left=(ad_t4-ad_t6)*ad_l/(ad_w-ad_t6)+document.body.scrollLeft;
 f_ad.style.top=(ad_t4-ad_t6)*ad_t/(ad_w-ad_t6)+document.body.scrollTop;
 ad_lt.style.width=ad_t4-28;
 ad_lt.innerText=ad_t5+" 秒后关闭";
 var ad_timer=setTimeout("flashad()",ad_step);
}
flashad();
</script>
</body>
</html>
上一个：未知宽度的CSS水平居中
下一个：百度登录的层弹出窗口特效
更多图片编程知识: