添加到桌面

如何制作网站右下角弹出广告(附代码)

本文阅读 1 分钟
首页 技术教程 正文

相信大家都有这样的经历,当我们在打开某一个网站的时候,在电脑屏幕的右下角会弹出来一个小广告窗口。如下图:

2024-01-10T08:07:47.png
这个是如何制作出来的呢?在我们学做网站过程中,也可能在我们自己的网站中做出这样的效果。

在网页的底部标签上方粘贴以下的HTML代码:(相关教程:什么是HTML?)

<div id="rbbox"><a class="button" onclick="closeBox()">关闭</a><iframe src="https://www.xuewangzhan.net/" frameborder="0" height="200" width="300" scrolling="no"></iframe></div>

在标签下方,粘贴以下的JS代码:

<script language="javascript" type="text/javascript">
window.onload=function(){showBox();setTimeout("closeBox()",5000)}
function showBox(o){
if (o==undefined) o=document.getElementById("rbbox");
o.style.height=o.clientHeight+2+"px";
if (o.clientHeight<200) setTimeout(function(){showBox(o)},5);
}
function closeBox(){document.getElementById("rbbox").style.display="none";}
</script>

在网页头部标签上面粘贴以下的CSS样式代码:

<style type="text/css">
#rbbox{position:absolute;right:0;bottom:0;width:300px;height:0px;overflow:hidden}
.button{display:inline;float:right;font-size:12px;cursor:pointer}
</style>

这样,网站右下角弹出广告效果就制作好了。

本文来自投稿,不代表本站立场,如若转载,请注明出处:
Image
-- 展开阅读全文 --
给网站添加个HTML灯笼-元旦灯笼代码
« 上一篇 12-31
正式更名“牛角源码”
下一篇 » 01-02

发表评论

发表评论