信息页文内画中画广告js实现代码(文中加载广告方式)

我们小编就直接给代码了：

<!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的，当然网上还有一些需要判断字符长度截取的方法，都是不错的。

当然现在广告比较多的而且控制的不错的可以到新浪网看下他的内容页的广告也有文内的。

赞 (0)

相关推荐

  • asp画中画广告插入在每篇文章中的实现方法

    尽管很多人给出了给每篇文章加上画中画广告的方法,但是这些所谓的方法,都不能真正地实现文字环绕在广告周围的"画中画"效果,只能左对其或者右对齐.现在要讨论的这个方法才能真正实现像新浪网.搜狐网那样的画中画广告效果. 首先说一下错误的div+CSS方法,希望大家别被误导: <div id="outer" style="float:left;"> <div id="inner" style="float:

  • 信息页文内画中画广告js实现代码(文中加载广告方式)

    我们小编就直接给代码了: <!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=&

  • js检测iframe是否加载完成的方法

    本文实例讲述了js检测iframe是否加载完成的方法.分享给大家供大家参考,具体如下: 这里是继上一篇<js实现iframe框架取值的方法(兼容IE,firefox,chrome等)>的扩展应用: 应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢? iframe1.html: <html> &

  • 一文搞懂JavaScript如何实现图片懒加载

    一文搞懂JavaScript如何实现图片懒加载

    目录 实现思路 准备知识 data-* getBoundingClientRect() throttle window.innerHeight 完整代码 js部分 CSS部分 运行结果 总结 图片懒加载,往往作为减少首页白屏时间的一个解决方案而出现.直观的来说,就是不要直接加载所有图片,而是满足一定条件后才加载,也就是”惰性加载“.实现图片懒加载的方式有很多,如果要简单点那就直接使用第三方插件:vue-lazyload,如果想探究一下别人的插件是怎么实现图片懒加载的,那么可以看看本文是如何实现的

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • JS简单实现滑动加载数据的方法示例

    本文实例讲述了JS简单实现滑动加载数据的方法.分享给大家供大家参考,具体如下: //滑动 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; }else if (document.body) { scrollTop =

  • 常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数

    为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在"sourceController.js"文件内. function sourceController(){ var root = ""; var cssCount = 0; // css加载计数器 var jsCount = 0; // js加载计数器 this.callfunc = null; // 回调函数 this.

  • JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)

    方法回调:callback方法回调是指当某方法执行完成后,去自动执行指定的另一方法的过程.下面举两个代表性的例子,说说JS世界里的方法回调. 一 对JS脚本文件动态加载,当加载完成后,去回调一个函数 复制代码 代码如下: <script> /* js动态加载脚本库方法 */ function include_js(file) { var _doc = document.getElementsByTagName('head')[0]; var js = document.createElemen

  • javascript 广告后加载，加载完页面再加载广告

    先加载完页面再加载广告的原理: 网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码.等页面加载完再加载广告其实就是将广告的 JS 代码放在页面的底部,等页面内容打开完成后再加载到广告代码,再用页面上预留好的的 DIV 输出广告. 使用方法: 1.将以下代码放置页面中想要放广告的地方 复制代码 代码如下: <div id="myads">载入中-</div> 2.将一下代码放置页面底部,也就

  • 原生JS实现图片懒加载之页面性能优化

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

  • Android实现加载广告图片和倒计时的开屏布局

    这是一个android开屏布局的实例,可以用于加载广告图片和倒计时的布局.程序中设置的LayoutParams,划分额外空间比例为6分之5,具体权重比例可根据用户自己需求来自定义,异步加载广告图片,相关的Android代码. 具体实现代码如下: package cn.waps.extend; import android.app.Activity; import android.content.Context; import android.content.res.Configuration;

随机推荐