点睛广告原理 js实现代码

使用JavaScript实现点睛广告

最新推荐文章于 2025-05-30 10:54:19 发布

原创最新推荐文章于 2025-05-30 10:54:19 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客展示了如何使用JavaScript实现点睛广告，通过解析DOM节点，查找并替换关键字，为网页内容添加广告链接，实现点击高亮和提示效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>antsnet's blog</title>
<link href="css/style.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{
margin:0px;
font-size:12px;
}
#head{
margin:0px auto;
width:960px;
height:28px;
}
#head ul{
margin:0px;
width:100%;
list-style:none;
}
#headLeft{
width:6px;
height:28px;
float:left;
background:url(http://www.antsnet.net/images/headLeft.gif);
}
#headCenter{
width:947px;
height:28px;
line-height:28px;
float:left;
background:url(http://www.antsnet.net/images/headBackground.gif);
}
#headRight{
width:7px;
height:28px;
float:left;
background:url(http://www.antsnet.net/images/headRight.gif);
}
#contents{
margin:0px auto;
width:958px;
height:auto;
line-height:25px;
border-left:#CCCCCC 1px solid;
border-right:#CCCCCC 1px solid;
}
#contnets ul{
margin:0px;
list-style:none;
width:100%;
}
#foot{
margin:0px auto;
width:960px;
height:80px;
}
#foot ul{
margin:0px;
width:100%;
list-style:none;
}
#footLeft{
width:24px;
height:80px;
float:left;
background:url(http://www.antsnet.net/images/footLeft.gif);
}
#footCenter{
width:917px;
height:80px;
text-align:center;
line-height:25px;
background:url(http://www.antsnet.net/images/footBackground.gif);
float:left;
}
#footRight{
width:19px;
height:80px;
float:left;
background:url(http://www.antsnet.net/images/footRight.gif);
}
</style>
</head>
<body>

<div id="head">
<ul>
<li id="headLeft"></li>
<li id="headCenter"></li>
<li id="headRight"></li>
</ul>
</div>


<div id="contents">
<ol>
<p>Welcome to my blog , this site under construct. any problem please contact me or brower this link <a href="http://blog.antsnet.net" target="_blank">http://blog.antsnet.net</a>. </p>The following contents is http://hi.baidu.com/antsnet's contetns.
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/2101d662d8e026dfe6113aff.html">一道有关数据抓取的笔试题</a></div>
<div class="date">2007-08-14          00:10</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/bfc3b9a17040d38946106473.html">用PHP防止通过各种手段下载你的JS代码</a></div>
<div class="date">2007-08-02          16:25</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/0bfb0fd71e3be3dfa144dfba.html">PHP实现抓屏</a></div>
<div class="date">2007-07-20          09:05</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/25f5afafb1ddd2ce7cd92aa2.html">xml parse[转自网上]</a></div>
<div class="date">2007-07-19          11:03</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/c5db942bd9ad58f8e7cd400b.html">IntelliTXT开发笔记</a></div>
<div class="date">2007-07-18          10:28</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/13ddd11b38772cd7ac6e752c.html">PHP间隔一段时间滚动显示数组内容</a></div>
<div class="date">2007-07-02          15:19</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/fb09d2c8920dd7157e3e6f34.html">PHP中日期相减的函数</a></div>
<div class="date">2007-06-25          09:46</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/853b194c40ae0cf8d62afc02.html">从alibaba上边抓取搜索的相关搜索关键字</a></div>
<div class="date">2007-06-02          17:21</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/5b39e5cdb1582d500eb345f2.html">通过Socket获取网站的数据数据</a></div>
<div class="date">2007-05-21          18:29</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/89d293ef01a00aeecf1b3e4f.html">无限级树型菜单JS版本</a></div>
<div class="date">2007-05-19          15:02</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/5f6ec8ef1860d437adafd54a.html">自动抓取alibaba上的产品名和产品介绍的链接</a></div>
<div class="date">2007-05-14          15:21</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/f5934cc254f21b34e4dd3b31.html">无限级树型菜单</a></div>
<div class="date">2007-05-14          09:50</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/2538f8ed5ee49b4e79f05521.html">JS实现无限级分类的选项</a></div>
<div class="date">2007-05-12          09:29</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/5718b5fdb27f451709244dba.html">网易网盘添加附件效果（八）</a></div>
<div class="date">2007-05-10          22:00</div></li>
<li><div class="tit"><a target="_blank" href="http://hi.baidu.com/antsnet/blog/item/4ffcbb0ef8f5c1e636d122ba.html">网易网盘添加附件效果（七）</a></div>
<div class="date">2007-05-10          21:59</div></li>
</ol>
</div>


<div id="foot">
<ul>
<li id="footLeft"></li>
<li id="footCenter"><p>Power by: www.antsnet.net</p>Date:2007-08-21 13:47</li>
<li id="footRight"></li>
</ul>
</div>


<script language="javascript">
var uid="0";
var S__699_ADVERTISMENT;
var S__COUNT_KEYWORD=0;//统计已经投放出去的关键字总数，如果关键字的总数少于5个的话就重新加载关键字
var S__KEYWORDS=["blog","construct","mail","keyword","contents","switch","advertisment","antsnet","2007"];//此处的关键字可以由自己定制
var d=document.getElementById(S__699_ADVERTISMENT) ?document.getElementById(S__699_ADVERTISMENT) : document.body;