嗨!怎么样,工作还顺利吗?

默认分类

网站头部下滑广告停留几秒后收起的代码

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
评论与留言

以下内容均由网友提交发布,版权与真实性无法查证,请自行辨别。

微信搜一搜:任霏博客