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


Posted in Javascript onJanuary 03, 2016

三水点靠木小编就直接给代码了:

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

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

Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
基于javascript实现简单计算器功能
Jan 03 #Javascript
详解Javascript事件驱动编程
Jan 03 #Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 #Javascript
js实现搜索框关键字智能匹配代码
Mar 26 #Javascript
javascript合并表格单元格实例代码
Jan 03 #Javascript
JS Array.slice 截取数组的实现方法
Jan 02 #Javascript
jquery实现简单的全选和反选功能
Jan 02 #Javascript
You might like
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
基于python的字节编译详解
2017/09/20 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
selenium+python实现自动登录脚本
2018/04/22 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
美国折扣网站:jClub
2017/08/07 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
企业节能减排实施方案
2014/03/19 职场文书
企业党员公开承诺书
2014/03/26 职场文书
初中新生军训方案
2014/05/13 职场文书
股权转让协议范本
2014/12/07 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
入党积极分子群众意见
2015/06/01 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
七年级英语教学反思
2016/02/15 职场文书
python获取字符串中的email
2022/03/31 Python
KVM基础命令详解
2022/04/30 Servers
element tree树形组件回显数据问题解决
2022/08/14 Javascript