我们常常看到一些大网站，在过节或者搞活动时，整个页面会向下滑动，在网页最上方显示一个活动图片，几秒后会慢慢收起，其实这个很好实现
思路是：在网页最上方，设置一个div，他的初始高度是零，所以不会显示，当页面加载完毕后，执行脚本程序，使div的高度慢慢增加，停留几秒后再减小，下面是代码，可以直接复制成为html文件执行。
[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>头部公告</title>
<script type="text/javascript">
var intervalId = null;
function slideAd(id,sState,nMaxHth,nMinHth)
{
this.id=id; this.state=sState || "down" ;
this.maxHeigth=nMaxHth || 250; //公告高度
this.minHeigth=nMinHth || 0;
var facter = 5;
var obj = document.getElementById(id);
if(intervalId != null)
{
window.clearInterval(intervalId);
}
function openBox()
{
var h = obj.offsetHeight;
facter += 0.1; //下滑速度
var h = ((this.state == "down") ? (h +facter ) : (h - facter)) ;
if(h >=this.maxHeigth)
{
h = this.maxHeigth; window.clearInterval(intervalId);
}
if(h < this.minHeigth)
{
h = 0;
window.clearInterval(intervalId);
}
obj.style.height = h +"px";
}
function closeBox()
{
slideAd(id,"up",nMaxHth,nMinHth);
}
intervalId = window.setInterval(openBox,60);
try{ setTimeout(closeBox, 6000); //停留时间
}
catch(e)
{}
}
</script>
</head>
<body> <!--头部滑动公告开始-->
<div id="top-gonggao" style="width:980px;height:0px;overflow:hidden;margin-left:auto;margin-right:auto;">
<a href="#" target="_blank">
<img src="<a href="http://www.neilren.com/gonggao/img/gonggao.jpg">http://www.neilren.com/gonggao/img/gonggao.jpg</a>" width="980" height="250" border="0"/>
</a>
</div>
<!--头部滑动公告结束-->
页面内容<br/>
公告图片规范：宽度980px 高度：250px
<script type="text/javascript">slideAd("top-gonggao")</script>
</body>
</html>
[/code]
直接复制就可以，由于使用代码高亮插件，好像图片链接那里有点错误，我写的是src="http://www.neilren.com/gonggao/img/gonggao.jpg"但是他显示的是<a>标签
商业用途请联系作者获得授权。
版权声明：本文为博主「任霏」原创文章，遵循 CC BY-NC-SA 4.0 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://www.renfei.net/posts/1000040
相关推荐
猜你还喜欢这些内容，不妨试试阅读一下
评论与留言
以下内容均由网友提交发布，版权与真实性无法查证，请自行辨别。
本站有缓存策略，时间约2小时后能看到您的评论。本站使用自动审核机制，如果您的内容包含广告/谩骂/恐怖/暴力/涉政等不和谐内容将无法展示！
本站有缓存策略，时间约2小时后能看到您的评论。本站使用自动审核机制，如果您的内容包含广告/谩骂/恐怖/暴力/涉政等不和谐内容将无法展示！
标签云
Apple (8) 大数据 (46) BT/PT (1) 比特币 (10) 网线 (5) 云计算 (9) 代码 (109) 数据库 (29) 开发 (211) 硬件 (12) DNS (11) 域名 (24) .NET (14) Git (12) GitHub (25) 谷歌 (8) 主机 (21) IDEA (7) Java (73) Linux (10) MyBatis (3) MySQL (9) 网络 (27) 新闻 (85) Nginx (2) 开源 (42) 运维 (159) Oracle (4) 项目管理 (2) 编程 (163) 树莓派 (3) scala (3) 安全 (49) 服务器 (54) 软件分享 (37) spring (13) SQL (13) U盘 (2) USB (1) 日常 (132) 建站 (124)