信息頁文內(nèi)畫中畫廣告js實現(xiàn)代碼(文中加載廣告方式)
更新時間:2016年01月03日 11:39:29 投稿:mdxy-dxy
一般來說文章內(nèi)容中的廣告點擊率更好,也更容易被訪客看到,如果直接將廣告放到頁面頭部會影響網(wǎng)站的速度,所以一般都比較喜歡這種方法,這里分享下實現(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>每天都有一個明天,在我們的心中,明天總是美好明亮的??鞓返拿鎸ξ磥恚e極的對待生活,讓生活充滿花香。</p>
<p>現(xiàn)代詩歌,是充滿活力充滿力量的一種文體。當(dāng)積極向上的內(nèi)容用現(xiàn)代詩歌展現(xiàn)出來時,似乎正能量飽滿而又精神的陽光一般。讓我們沐浴陽光,天天向上!</p>
<p><strong>一、《自信》</strong></p>
<p>不要馬馬虎虎<br />不要三心二意<br />追求絕對的準(zhǔn)確<br />追求相對的完美<br />就算一個字也要寫好<br />才會真正的收獲快樂</p>
<p>無論在任何時候<br />都要對自己充滿信<br />無論遇到任何羈絆<br />都要堅定向前<br />相信自己是最棒的<br />所有的困難都會被擊垮</p>
<p><strong>二、《跨越自己》</strong></p>
<p>我們可以欺瞞別人<br />卻無法欺瞞自己<br />當(dāng)我們走向枝繁葉茂的五月<br />青春就不再是一個謎</p>
<p>向上的路<br />總是坎坷又崎嶇<br />要永遠(yuǎn)保持最初的浪漫<br />真是不容易<br />有人悲哀<br />有人欣喜<br />當(dāng)我們跨越了一座高山<br />也就跨越了一個真實的自己</p>
<p><strong>三、《倘若才華得不到承認(rèn)》</strong></p>
<p>倘若才華得不到承認(rèn)<br />與其詛咒,不如堅忍<br />在堅忍中積蓄力量<br />默默耕耘<br />詛咒,無濟(jì)于事<br />只能讓原來的光芒黯淡<br />在變得黯淡的光芒中<br />淪喪的更有,大樹的精神<br />飄來的是云<br />飄去的也是云<br />既然今天<br />沒人識得星星一顆<br />那么明日<br />何妨做,皓月一輪</p>
<p><strong>四、《我微笑著走向生活》</strong></p>
<p>我微笑著走向生活,<br />無論生活以什么方式回敬我。<br />報我以平坦嗎?<br />我是一條歡樂奔流的小河。<br />報我以崎嶇嗎?<br />我是一座大山莊嚴(yán)地思索!<br />報我以幸福嗎?<br />我是一只凌空飛翔的燕子。<br />報我以不幸嗎?<br />我是一根勁竹經(jīng)得起千擊萬磨!<br />生活里不能沒有笑聲,<br />沒有笑聲的世界該是多么寂寞。<br />什么也改變不了我對生活的熱愛,<br />我微笑著走向火熱的生活!</p>
<p><strong>五、《熱愛生命》</strong></p>
<p>我不去想是否能夠成功<br />既然選擇了遠(yuǎn)方<br />便只顧風(fēng)雨兼程</p>
<p>我不去想能否贏得愛情<br />既然鐘情于玫瑰<br />就勇敢地吐露真誠</p>
<p>我不去想身后會不會襲來寒風(fēng)冷雨<br />既然目標(biāo)是地平線<br />留給世界的只能是背影</p>
<p>我不去想未來是平坦還是泥濘<br />只要熱愛生命<br />一切,都在意料之中</p>
<p><strong>六、《獻(xiàn)給黃昏的星》</strong></p>
<p>黃昏的星從大地海洋升起<br />我站在黑夜的盡頭<br />看到黃昏像一座雪白的裸體<br />我是天空中唯一一顆發(fā)光的星星</p>
<p>在這艱難的時刻<br />我仿佛看到了另一種人類的昨天<br />三個相互殘殺的事物被懟到了一起<br />黃昏,是天空中唯一的發(fā)光體<br />星,是黑夜的女兒苦悶的床單<br />我,是我一生中無邊的黑暗</p>
<p>在這最后的時刻,我竟能夢見<br />這荒蕪的大地,最后一粒種子<br />這下垂的時間,最后一個聲音<br />這個世界,最后的一件事情,黃昏的星</p>
<p><strong>七、《山高路遠(yuǎn)》</strong></p>
<p>呼喊是爆發(fā)的沉默<br />沉默是無聲的召喚<br />不論激越<br />不是寧靜<br />我祈求<br />只要不是平淡<br />如果遠(yuǎn)方呼喊我<br />我就走向遠(yuǎn)方<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>腳本之家信息頁文內(nèi)畫中畫開始</font>');
document.write("<font color=red>腳本之家信息頁文內(nèi)畫中畫結(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>腳本之家信息頁文內(nèi)畫中畫開始</font>');
document.write("<font color=red>腳本之家信息頁文內(nèi)畫中畫結(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ù)需要修改。
這個是需要加載jquery的,當(dāng)然網(wǎng)上還有一些需要判斷字符長度截取的方法,都是不錯的。
當(dāng)然現(xiàn)在廣告比較多的而且控制的不錯的可以到新浪網(wǎng)看下他的內(nèi)容頁的廣告也有文內(nèi)的。
您可能感興趣的文章:
相關(guān)文章
JavaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)進(jìn)階之?dāng)?shù)組方法總結(jié)(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
解析為什么axios會有params和data兩個參數(shù)
本文給大家分享為什么axios會有params和data兩個參數(shù),先來回顧一下axios的基本使用,怎么發(fā)送一個請求,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2023-10-10
javascript中Date對象應(yīng)用之簡易日歷實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript中Date對象應(yīng)用之簡易日歷實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07

