2013-06-30 02:43:24
网站头部下滑广告停留几秒后收起的代码
我们常常看到一些大网站，在过节或者搞活动时，整个页面会向下滑动，在网页最上方显示一个活动图片，几秒后会慢慢收起，其实这个很好实现
思路是：在网页最上方，设置一个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 版权协议，转载请附上原文出处链接及本声明。
相关推荐
猜你还喜欢这些内容，不妨试试阅读一下评论与留言
以下内容均由网友提交发布，版权与真实性无法查证，请自行辨别。微信订阅号
扫码关注「任霏博客」微信订阅号内容标签
最新留言
- 你写得非常清晰明了，让我很容易理解你的观点。
- 感谢分享！拿走了~
- 您是说 UCClient 类接收来自Discuz的UCenter的消息吧，请求是来自 Discuz 的 UCenter吗？code 为 null 说明请求URL地址中没有 code 参数 (?code=xxx) ，确定是 UCenter 发起的请求吗？
- String code = request.getParameter("code"); code一直是null 这是为什么啊
- 你好，我想问一下如果是分析型的数据库要怎么制作docker镜像呢 是修改V008R003C002B0320版本号吗
- 可以的，我也正在开发分享的程序，可以邮件或群联系我都可以，关于页面里有联系方式：https://www.renfei.net/page/about 。
- 有破解软件的需要可以私下联系您吗？
- 您好，手机APP只是个客户端，用于数据呈现展示，数据均保存在服务器上，只留个APP没有任何用处，无能为力哦。
- 老哥 看你弄了这么多软件好厉害啊。 我有个软件 我买过几个小会员 没用几天 然后商家跑路了，软件服务器关闭了，连不上去 用不了。 你能做成一个打补丁版本可以本地用的么？ 方便看下么？https://haodezhe.lanzouw.com/iD0f30h9joza 谢谢老哥！
- 您好，由于版权投诉和我国知识产权法的完善，我已经下架所有破解软件的下载链接了。
热文排行
- 生花妙笔信手来 – 基于 Amazon SageMaker 使用 Grounded-SAM 加速电商广告素材生成 [1]
- github.renfei.net 不再完整代理 Github 页面改为代理指定文件
- 优雅的源代码管理（三）：本地优雅的使用 Git Rebase 变基
- 优雅的源代码管理（二）：Git 的工作原理
- 优雅的源代码管理（一）：版本控制系统 VCS（Version Control System）与软件配置管理 SCM（Software Configuration Management）
- ChatGPT 开发商 OpenAI 买下极品域名 AI.com
- 火爆的 AI 人工智能 ChatGPT 国内注册教程、使用方式和收费标准
- 解决 SpringCloud 中 bootstrap.yml 不识别 @activatedProperties@ 参数
- Cron表达式书写教程搞定Linux、Spring、Quartz的定时任务
- 阿里云香港可用区C发生史诗级故障