快捷導(dǎo)航

信息頁(yè)文內(nèi)畫(huà)中畫(huà)廣告js實(shí)現(xiàn)代碼(文中加載廣告方式)

更新時(shí)間：2016年01月03日 11:39:29 投稿：mdxy-dxy

一般來(lái)說(shuō)文章內(nèi)容中的廣告點(diǎn)擊率更好，也更容易被訪客看到，如果直接將廣告放到頁(yè)面頭部會(huì)影響網(wǎng)站的速度，所以一般都比較喜歡這種方法，這里分享下實(shí)現(xiàn)方法

腳本之家小編就直接給代碼了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文中加載廣告方式</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.min.js"></script>
</head>
<body>
<div class="content" id="articleText">
<p>每天都有一個(gè)明天，在我們的心中，明天總是美好明亮的?？鞓?lè)的面對(duì)未來(lái)，積極的對(duì)待生活，讓生活充滿花香。</p>
<p>現(xiàn)代詩(shī)歌，是充滿活力充滿力量的一種文體。當(dāng)積極向上的內(nèi)容用現(xiàn)代詩(shī)歌展現(xiàn)出來(lái)時(shí)，似乎正能量飽滿而又精神的陽(yáng)光一般。讓我們沐浴陽(yáng)光，天天向上！</p>
<p><strong>一、《自信》</strong></p>
<p>不要馬馬虎虎<br />不要三心二意<br />追求絕對(duì)的準(zhǔn)確<br />追求相對(duì)的完美<br />就算一個(gè)字也要寫(xiě)好<br />才會(huì)真正的收獲快樂(lè)</p>
<p>無(wú)論在任何時(shí)候<br />都要對(duì)自己充滿信<br />無(wú)論遇到任何羈絆<br />都要堅(jiān)定向前<br />相信自己是最棒的<br />所有的困難都會(huì)被擊垮</p>
<p><strong>二、《跨越自己》</strong></p>
<p>我們可以欺瞞別人<br />卻無(wú)法欺瞞自己<br />當(dāng)我們走向枝繁葉茂的五月<br />青春就不再是一個(gè)謎</p>
<p>向上的路<br />總是坎坷又崎嶇<br />要永遠(yuǎn)保持最初的浪漫<br />真是不容易<br />有人悲哀<br />有人欣喜<br />當(dāng)我們跨越了一座高山<br />也就跨越了一個(gè)真實(shí)的自己</p>
<p><strong>三、《倘若才華得不到承認(rèn)》</strong></p>
<p>倘若才華得不到承認(rèn)<br />與其詛咒，不如堅(jiān)忍<br />在堅(jiān)忍中積蓄力量<br />默默耕耘<br />詛咒，無(wú)濟(jì)于事<br />只能讓原來(lái)的光芒黯淡<br />在變得黯淡的光芒中<br />淪喪的更有，大樹(shù)的精神<br />飄來(lái)的是云<br />飄去的也是云<br />既然今天<br />沒(méi)人識(shí)得星星一顆<br />那么明日<br />何妨做，皓月一輪</p>
<p><strong>四、《我微笑著走向生活》</strong></p>
<p>我微笑著走向生活，<br />無(wú)論生活以什么方式回敬我。<br />報(bào)我以平坦嗎？<br />我是一條歡樂(lè)奔流的小河。<br />報(bào)我以崎嶇嗎？<br />我是一座大山莊嚴(yán)地思索！<br />報(bào)我以幸福嗎？<br />我是一只凌空飛翔的燕子。<br />報(bào)我以不幸嗎？<br />我是一根勁竹經(jīng)得起千擊萬(wàn)磨！<br />生活里不能沒(méi)有笑聲，<br />沒(méi)有笑聲的世界該是多么寂寞。<br />什么也改變不了我對(duì)生活的熱愛(ài)，<br />我微笑著走向火熱的生活！</p>
<p><strong>五、《熱愛(ài)生命》</strong></p>
<p>我不去想是否能夠成功<br />既然選擇了遠(yuǎn)方<br />便只顧風(fēng)雨兼程</p>
<p>我不去想能否贏得愛(ài)情<br />既然鐘情于玫瑰<br />就勇敢地吐露真誠(chéng)</p>
<p>我不去想身后會(huì)不會(huì)襲來(lái)寒風(fēng)冷雨<br />既然目標(biāo)是地平線<br />留給世界的只能是背影</p>
<p>我不去想未來(lái)是平坦還是泥濘<br />只要熱愛(ài)生命<br />一切，都在意料之中</p>
<p><strong>六、《獻(xiàn)給黃昏的星》</strong></p>
<p>黃昏的星從大地海洋升起<br />我站在黑夜的盡頭<br />看到黃昏像一座雪白的裸體<br />我是天空中唯一一顆發(fā)光的星星</p>
<p>在這艱難的時(shí)刻<br />我仿佛看到了另一種人類(lèi)的昨天<br />三個(gè)相互殘殺的事物被懟到了一起<br />黃昏，是天空中唯一的發(fā)光體<br />星，是黑夜的女兒苦悶的床單<br />我，是我一生中無(wú)邊的黑暗</p>
<p>在這最后的時(shí)刻，我竟能夢(mèng)見(jiàn)<br />這荒蕪的大地，最后一粒種子<br />這下垂的時(shí)間，最后一個(gè)聲音<br />這個(gè)世界，最后的一件事情，黃昏的星</p>
<p><strong>七、《山高路遠(yuǎn)》</strong></p>
<p>呼喊是爆發(fā)的沉默<br />沉默是無(wú)聲的召喚<br />不論激越<br />不是寧?kù)o<br />我祈求<br />只要不是平淡<br />如果遠(yuǎn)方呼喊我<br />我就走向遠(yuǎn)方<br />如果大山召喚我<br />我就走向大山<br />雙腳磨破<br />干脆再讓夕陽(yáng)涂抹小路<br />雙手劃爛<br />索性就讓荊棘變成杜鵑<br />沒(méi)有比腳更長(zhǎng)的路<br />沒(méi)有比人更高的山</p>
</div>
<div class="clear"></div>

<div style="float:left;margin:10px 10px 10px 0;display:none" id="article_ad0">
<script type="text/javascript">
var sti;
var resize = function (temp, ad) {
 var timer, count = 0, limit = 50;
 timer = setInterval(function () {
  var tempOffset = temp.offset();
  var adOffset = ad.offset();

  count += 1;
  ad.css({
   left: tempOffset.left,
   top: tempOffset.top
  });
  if (count >= limit || adOffset.top === tempOffset.top) {
   clearInterval(timer)
  }
 }, 100);
};

function check_show(container, caid, order) {
 var ad = $('#' + caid);
 var offset;
 var temp = $('<div>').css({
  'float': 'left',
  width: ad.width(),
  height: ad.height(),
  margin: '10px 10px 10px 0'
 });
 if (ad.height() > 10) {
  $("#" + container + " p").eq(order).after(temp);
  offset = temp.offset();
  ad.css({
   position: 'absolute',
   left: offset.left,
   top: offset.top
  }).show();
  resize(temp, ad);
  clearInterval(sti);
 }
}

function weneiAd(container,aid){
  var p = $("#"+container).find("p").size();
	 var img = $("#"+container).find("img").size();
	 var caid='article_ad0';
	 var order=0;
	 if(img>1&&p<=3){
	 }else if(img==1&&p>3){
	 	order=1;
	 }else if(img==0&&p>3){
	 	order=1;
	 }else if(img>1&&p>5){
	 	order=5;
	 }
	 if(order>0){
	 //document.write("<div style=\"float:left;margin:10px 10px 10px 0;display:none\" id=\""+caid+"\">");
	 document.write('<font color=red>腳本之家信息頁(yè)文內(nèi)畫(huà)中畫(huà)開(kāi)始</font>');
		document.write("<font color=red>腳本之家信息頁(yè)文內(nèi)畫(huà)中畫(huà)結(jié)束</font>");
	 // document.write("<\/div>");
	 //document.write("<div style='clear:both'><\/div>");
	 sti=setInterval(function () { check_show(container,caid,order);},500);
	 }
}
weneiAd('articleText',4);
</script>
</div>
</body>
</html>

核心的js代碼：

<script type="text/javascript">
var sti;
var resize = function (temp, ad) {
 var timer, count = 0, limit = 50;
 timer = setInterval(function () {
  var tempOffset = temp.offset();
  var adOffset = ad.offset();

  count += 1;
  ad.css({
   left: tempOffset.left,
   top: tempOffset.top
  });
  if (count >= limit || adOffset.top === tempOffset.top) {
   clearInterval(timer)
  }
 }, 100);
};

function check_show(container, caid, order) {
 var ad = $('#' + caid);
 var offset;
 var temp = $('<div>').css({
  'float': 'left',
  width: ad.width(),
  height: ad.height(),
  margin: '10px 10px 10px 0'
 });
 if (ad.height() > 10) {
  $("#" + container + " p").eq(order).after(temp);
  offset = temp.offset();
  ad.css({
   position: 'absolute',
   left: offset.left,
   top: offset.top
  }).show();
  resize(temp, ad);
  clearInterval(sti);
 }
}

function weneiAd(container,aid){
  var p = $("#"+container).find("p").size();
	 var img = $("#"+container).find("img").size();
	 var caid='article_ad0';
	 var order=0;
	 if(img>1&&p<=3){
	 }else if(img==1&&p>3){
	 	order=1;
	 }else if(img==0&&p>3){
	 	order=1;
	 }else if(img>1&&p>5){
	 	order=5;
	 }
	 if(order>0){
	 //document.write("<div style=\"float:left;margin:10px 10px 10px 0;display:none\" id=\""+caid+"\">");
	 document.write('<font color=red>腳本之家信息頁(yè)文內(nèi)畫(huà)中畫(huà)開(kāi)始</font>');
		document.write("<font color=red>腳本之家信息頁(yè)文內(nèi)畫(huà)中畫(huà)結(jié)束</font>");
	 // document.write("<\/div>");
	 //document.write("<div style='clear:both'><\/div>");
	 sti=setInterval(function () { check_show(container,caid,order);},500);
	 }
}
weneiAd('articleText',4);
</script>

主要是order的大學(xué)控制廣告的位置，大家可以根據(jù)需要修改。

這個(gè)是需要加載jquery的，當(dāng)然網(wǎng)上還有一些需要判斷字符長(zhǎng)度截取的方法，都是不錯(cuò)的。

當(dāng)然現(xiàn)在廣告比較多的而且控制的不錯(cuò)的可以到新浪網(wǎng)看下他的內(nèi)容頁(yè)的廣告也有文內(nèi)的。

您可能感興趣的文章: