仿163动态效果小实例

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>仿163首页的广告收缩效果</title>

<style>

#top{

position:relative;

}

#content{

position:absolute;

}

</style>

</head>

<body οnlοad="moveDown()"style="margin:0px; 0px;">

<div id="top"style="width:100%; height:100px; background-color:#F96">网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

网页的广告部分<br>

</div>

<div id="content"style="width:100%; height:500px; background-color:#FF9">这是网页的正文部分</div>

</body>

</html>

<script language="javascript"type="text/javascript">

//定义要移动的距离

varh=0;

varmaxheight=300;

varst;

vartop=document.getElementById("top");

//初始时,设置top为隐藏状态

top.style.display="none";

//定义让广告部分展开

function moveDown(){

//累加

h+=2;

//设置高度等于我们累加的值

top.style.height=h;

//设置层显示

top.style.display="block";

//判断是否到最大

if(h<=maxheight){

st=setTimeout("moveDown()",50);

}else{

clearTimeout(st);

//延迟3秒,开始收缩

setTimeout("moveUp()",3000);

}

}

//定义让广告部分收缩

function moveUp(){

//设置

h-=2;

//设置高度等于我们累加的值

top.style.height=h;

//设置层显示

top.style.display="block";

if(h<=0){

top.style.display="none";

//清空定时器

clearTimeout(st);

}else{

//如果h>0,则继续收缩

st= setTimeout("moveUp()",50);

}s

}

</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值