信息页文内画中画广告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 相关文章推荐
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
js实现简单的随机点名器
Sep 17 Javascript
基于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
DIY实用性框形天线
2021/03/02 无线电
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
安全生产检查通报
2014/01/29 职场文书
运动会口号16字
2014/06/07 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
公司员工培训管理制度
2015/08/04 职场文书
导游词之崇武古城
2019/10/07 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
python用tkinter开发的扫雷游戏
2021/06/01 Python