网页广告代码php,网页广告特效代码分享

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

为了练习javascript，做了一个简单的demo，实现的是广告从顶部慢慢拉出到最大，然后停留2s，再收缩到比较小且可以关闭的广告特效。图片可以替换为任意其他的图片。

代码如下

#ad{

width:962px;

display:none;

margin:0 auto;

overflow:hidden;

position:relative;

}

#main{

margin:0 auto;

width:960px;

height:1700px;

}

#close{

width:20px;

height:20px;

position:absolute;

top:0;

right:0;

font-size:16px;

line-height:20px;

text-align:center;

display:none;

background:yellowgreen;

}

x

var oImgAd=document.getElementById('imgAd');

var oad=document.getElementById('ad');

var ocur=document.getElementById('curAd');

var closeBtn=document.getElementById('close');

var h=0;

var maxH=oImgAd.height;

var minH=ocur.height;

function down()

{

if(h

{

h+=5;

oad.style.height=h+"px";

oad.style.display="block";

setTimeout(down,5);

}

else{

setTimeout(up,2000);

}

}

function up(){

if(h>minH){

h-=5;

oad.style.height=h+"px";

setTimeout(up,5);

}

else{

oImgAd.style.display='none';

closeBtn.style.display='block';

}

}

closeBtn.οnclick=function(){

oad.style.display='none';

}

setTimeout(down,1000);