网站头部下滑广告停留几秒后收起的代码
2013年06月30日 10:43:24 · 本文共 1,327 字阅读时间约 4分钟 · 4,145 次浏览
我们常常看到一些大网站,在过节或者搞活动时,整个页面会向下滑动,在网页最上方显示一个活动图片,几秒后会慢慢收起,其实这个很好实现
思路是:在网页最上方,设置一个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://blog.renfei.net/posts/1000040
版权声明:本文为博主「任霏」原创文章,遵循 CC BY-NC-SA 4.0 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.renfei.net/posts/1000040
相关推荐
猜你还喜欢这些内容,不妨试试阅读一下
评论与留言
以下内容均由网友提交发布,版权与真实性无法查证,请自行辨别。
热评文章
- 前后端分离项目接口数据加密的秘钥交换逻辑(RSA、AES)
- OmniGraffle 激活/破解 密钥/密匙/Key/License
- CleanMyMac X 破解版 [TNT] 4.6.0
- OmniPlan 激活/破解 密钥/密匙/Key/License
- 人大金仓 KingbaseES V8 R3 安装包、驱动包和 License 下载地址
- Parallels Desktop For Mac 16.0.1.48911 破解版 [TNT]
- Redis 未授权访问漏洞分析 cleanfda 脚本复现漏洞挖矿
- Parallels Desktop For Mac 15.1.4.47270 破解版 [TNT]
- Sound Control 破解版 2.4.2
- 向谷歌搜索引擎主动推送网页的教程 Google Indexing API 接口实现
热文排行
- 博客完全迁移上阿里云,我所使用的阿里云架构
- 微软确认Windows 10存在bug 部分电脑升级后被冻结
- 大佬们在说的AQS,到底啥是个AQS(AbstractQueuedSynchronizer)同步队列
- 比特币(BTC)钱包客户端区块链数据同步慢,区块链数据离线下载
- Java中说的CAS(compare and swap)是个啥
- 小心免费主题!那些WordPress主题后门,一招拥有管理员权限
- 强烈谴责[wamae.win]恶意反向代理我站并篡改我站网页
- 讨论下Java中的volatile和JMM(Java Memory Model)Java内存模型
- 新版个人网站 NEILREN4J 上线并开源程序源码
- 我站近期遭受到恶意不友好访问攻击公告