信息頁文內畫中畫廣告js實現代碼(文中加載廣告方式)

原文鏈接:https://blog.csdn.net/WuLex
<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>

<div class="content" id="articleText">

<p>每天都有一個明天,在我們的心中,明天總是美好明亮的。快樂的面對未來,積極的對待生活,讓生活充滿花香。</p>

<p>現代詩歌,是充滿活力充滿力量的一種文體。當積極向上的內容用現代詩歌展現出來時,似乎正能量飽滿而又精神的陽光一般。讓我們沐浴陽光,天天向上!</p>

<p><strong>一、《自信》</strong></p>

<p>不要馬馬虎虎<br>不要三心二意<br>追求絕對的準確<br>追求相對的完美<br>就算一個字也要寫好<br>纔會真正的收穫快樂</p>

<p>無論在任何時候<br>都要對自己充滿信<br>無論遇到任何羈絆<br>都要堅定向前<br>相信自己是最棒的<br>所有的困難都會被擊垮</p>

<p><strong>二、《跨越自己》</strong></p>

<p>我們可以欺瞞別人<br>卻無法欺瞞自己<br>當我們走向枝繁葉茂的五月<br>青春就不再是一個謎</p>

<p>向上的路<br>總是坎坷又崎嶇<br>要永遠保持最初的浪漫<br>真是不容易<br>有人悲哀<br>有人欣喜<br>當我們跨越了一座高山<br>也就跨越了一個真實的自己</p>

<p><strong>三、《倘若才華得不到承認》</strong></p>

<p>倘若才華得不到承認<br>與其詛咒,不如堅忍<br>在堅忍中積蓄力量<br>默默耕耘<br>詛咒,無濟於事<br>只能讓原來的光芒黯淡<br>在變得黯淡的光芒中<br>淪喪的更有,大樹的精神<br>飄來的是雲<br>飄去的也是雲<br>既然今天<br>沒人識得星星一顆<br>那麼明日<br>何妨做,皓月一輪</p>

<p><strong>四、《我微笑着走向生活》</strong></p>

<p>我微笑着走向生活,<br>無論生活以什麼方式回敬我。<br>報我以平坦嗎?<br>我是一條歡樂奔流的小河。<br>報我以崎嶇嗎?<br>我是一座大山莊嚴地思索!<br>報我以幸福嗎?<br>我是一隻凌空飛翔的燕子。<br>報我以不幸嗎?<br>我是一根勁竹經得起千擊萬磨!<br>生活裏不能沒有笑聲,<br>沒有笑聲的世界該是多麼寂寞。<br>什麼也改變不了我對生活的熱愛,<br>我微笑着走向火熱的生活!</p>

<p><strong>五、《熱愛生命》</strong></p>

<p>我不去想是否能夠成功<br>既然選擇了遠方<br>便只顧風雨兼程</p>

<p>我不去想能否贏得愛情<br>既然鍾情於玫瑰<br>就勇敢地吐露真誠</p>

<p>我不去想身後會不會襲來寒風冷雨<br>既然目標是地平線<br>留給世界的只能是背影</p>

<p>我不去想未來是平坦還是泥濘<br>只要熱愛生命<br>一切,都在意料之中</p>

<p><strong>六、《獻給黃昏的星》</strong></p>

<p>黃昏的星從大地海洋升起<br>我站在黑夜的盡頭<br>看到黃昏像一座雪白的裸體<br>我是天空中唯一一顆發光的星星</p>

<p>在這艱難的時刻<br>我彷彿看到了另一種人類的昨天<br>三個相互殘殺的事物被懟到了一起<br>黃昏,是天空中唯一的發光體<br>星,是黑夜的女兒苦悶的牀單<br>我,是我一生中無邊的黑暗</p>

<p>在這最後的時刻,我竟能夢見<br>這荒蕪的大地,最後一粒種子<br>這下垂的時間,最後一個聲音<br>這個世界,最後的一件事情,黃昏的星</p>

<p><strong>七、《山高路遠》</strong></p>

<p>呼喊是爆發的沉默<br>沉默是無聲的召喚<br>不論激越<br>不是寧靜<br>我祈求<br>只要不是平淡<br>如果遠方呼喊我<br>我就走向遠方<br>如果大山召喚我<br>我就走向大山<br>雙腳磨破<br>乾脆再讓夕陽塗抹小路<br>雙手劃爛<br>索性就讓荊棘變成杜鵑<br>沒有比腳更長的路<br>沒有比人更高的山</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>信息頁文內畫中畫開始</font>');

        document.write("<font color=red>信息頁文內畫中畫結束</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>

主要是order控制廣告的位置,大家可以根據需要修改。

這個是需要加載jquery的,當然網上還有一些需要判斷字符長度截取的方法,都是不錯的。

當然現在廣告比較多的而且控制的不錯的可以到新浪網看下他的內容頁的廣告也有文內的。

如圖:

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章