飘出的广告窗口，可以自动关闭 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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="//ku.shouce.ren/files/images/201601/56a31c1006868.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代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

表格图层

描述

打开页面后动画滑出一个层窗口，可以作为广告，可以定时关闭，当然也可手动关闭，用作广告代码很不错。

收藏