訊息頁文內畫中畫廣告js實作程式碼(文中載入廣告方式)

首頁

web前端

js教程

訊息頁文內畫中畫廣告js實作程式碼(文中載入廣告方式)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

畫中畫

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

<!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>每天都有一个明天，在我们的心中，明天总是美好明亮的。快乐的面对未来，积极的对待生活，让生活充满花香。</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>
</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>脚本之家信息页文内画中画开始</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>

登入後複製

主要是order的大學控制廣告的位置，大家可以依需求修改。

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7655

CakePHP 教程

1393

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT迷你填字遊戲答案

110

Related knowledge

剪映電腦版畫中畫在什麼地方-剪映電腦版找到畫中畫位置的方法 Mar 04, 2024 pm 12:19 PM

本章節為你們帶來的文章是關於剪映電腦版軟體的，你們曉得剪映電腦版畫中畫在什麼地方嗎?接下來，就是小編為各位帶來的剪映電腦版找到畫中畫位置的方法，有興趣的用戶快來下文看看。首先開啟電腦版剪映。點擊開始創作按鈕。點選想要匯入影片素材，加入進去要剪輯的影片檔。然後將文件拖曳到編輯區域。剪映電腦專業版沒有畫中畫功能，但我們可以透過再次加入素材來實現畫中畫功能。同樣將新加入的影片檔案拖曳至影片編輯軌道。這樣選取素材文件，調整影片大小即可實現手機剪映畫中畫功能了。

如何在 iPhone 上畫中畫縮放會議 Apr 15, 2023 pm 11:43 PM

如何在iPhone上將縮放設定為畫中畫模式確保您的iPhone使用的是最新版本的iOS，並確保Zoom應用程式已更新到可用的最新版本。剩下的很簡單：像往常一樣參加Zoom會議，並將視頻作為iPhone上的主屏幕（即；不聊天，不參加者列表等）像往常一樣從iPhone底部向上滑動，返回主屏幕ZoomMeeting視頻窗口應自動最小化為畫中畫影片就像任何其他畫中畫視窗一樣，您可以在螢幕上移動它，增加和減少縮圖的大小，以及使用其他應用程序，因為ZoomMeetingPiP窗

YouTube 結束了在 iOS 上快速啟用畫中畫的實驗，但仍適用於現有用戶 Apr 14, 2023 am 09:19 AM

YouTube去年 6 月開始正式向 iOS 應用程式推出畫中畫，這是一個非常緩慢的過程。高級訂閱者得到了解決方法，但 YouTube 的 iPhone 和 iPad 畫中畫測試現已結束。「iOS 上的畫中畫」實驗（從 8 月開始）在 4 月初結束後已從youtube.com/new上消失。谷歌在桌面網站和行動應用程式上透過「您正在嘗試的功能已關閉」橫幅通知人們。也就是說，YouTube PiP 仍然適用於先前啟用測試的 iPhone 和 iPad 用戶。它並沒有在我們積極使用 PiP 的 iPad

在 iPhone 和 iPad 上取得 YouTube 畫中畫的解決方法 Apr 13, 2023 pm 10:31 PM

在 iPhone 和 iPad 上使用 YouTube Web 畫中畫的解決方法我們將使用 Shortcuts 應用程式作為解決方法，但您可以在 Safari 中觀看 YouTube 影片時從 iOS 共享表選單存取此工具。不，它不適用於官方 YouTube 應用程式。在開始之前，您需要將裝置設定為安裝第三方捷徑。完成後，請按照下列步驟操作：首先，前往此連結並點擊「取得捷徑」以在 iPhone 或 iPad 上下載 YouTube PiP 捷徑。這將在您的裝置上啟動 Shortcuts

Vue中如何實現圖片的畫中畫和多重曝光？ Aug 19, 2023 pm 11:43 PM

Vue中如何實現圖片的畫中畫和多重曝光？引言：在現代的網頁設計中，圖片的展示效果是非常重要的一環。畫中畫和多重曝光是兩種常見的圖片處理效果，它們可以讓圖片更加生動、獨特和吸引人。本文將介紹如何使用Vue框架來實現這兩種效果，並提供相關的程式碼範例。一、畫中畫效果實現畫中畫是一種將一個小尺寸的圖片嵌套在另一個大尺寸的圖片中的效果。實現畫中畫效果的關鍵是利用C

Win11 安卓子系統 WSA 2303 發佈全新更新: 引入首次支援的畫中畫模式 Dec 25, 2023 pm 04:49 PM

微軟官博今日宣布，向所有Windows預覽體驗成員頻道發布了Windows11安卓子系統2303.40000.3.0版本更新。此次更新將提高可靠性和安全性，並為使用者帶來畫中畫（PIP）模式。畫中畫是一種影片內容呈現方式，指在一部影片全螢幕播出的同時，於畫面的小面積區域上同時播出另一部影片。據介紹，Windows11安卓子系統現已支援App的畫中畫功能。視窗模式下的App將支援Windows調整大小和對齊功能，方便使用者進行多工處理。我們測試，B站的小窗模式已正常顯示，但操作方面仍有些問題，無法

火狐瀏覽器怎麼啟用畫中畫影片控制-火狐瀏覽器啟用畫中畫影片控制的方法 Mar 04, 2024 am 11:40 AM

大家知道火狐瀏覽器怎麼啟用畫中畫視頻控制嗎?下文小編就帶來了火狐瀏覽器啟用畫中畫視頻控件的方法，希望對大家能夠有所幫助，一起跟著小編來學習一下吧! 1.開啟火狐瀏覽器，選擇右上角三條線的圖標，如下圖所示。 2、從彈出的視窗中點選選項，如下圖所示。 3、將啟用畫中畫影片控制項勾選即可，如下圖所示。上面就是小編為大家帶來的火狐瀏覽器怎麼啟用畫中畫影片控制的全部內容，希望對大家能夠有所幫助喔。