`
zyongsheng83
  • 浏览: 41347 次
  • 性别: Icon_minigender_1
  • 来自: 大连
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个网页浮动广告的控制方法

阅读更多
页面需要引用的广告控制代码:
<SCRIPT LANGUAGE="JavaScript">
	ads = new Array();
	/**
	* aTargetLeft 和 aTargetRight 只中必须有一个是-1, 有一个大于-1
	* 
	* aObj - 要作为浮动广告的对象
	* aTargetTop - 浮动广告离页面顶部的距离
	* aTargetLeft - 如果要让浮动广告靠左,设置此值为广告离页面最左侧的距离,否则设置-1
	* aTargetRight - 如果要让浮动广告靠右,设置此值为广告离页面最右侧的距离,否则设置-1
	*/
	function FlowAD(aObj, aTargetTop, aTargetLeft, aTargetRight){
		this.obj = aObj;
		this.targetTop = aTargetTop;
		this.targetLeft = aTargetLeft;
		this.targetRight = aTargetRight;
		this.move();
	}
	FlowAD.prototype.move = function(){
		//set the top
		var newTop = document.body.scrollTop + this.targetTop;
		var maxTop = document.body.scrollHeight - this.obj.style.height.substr(0,this.obj.style.height.length-2);
		if(newTop > maxTop){
			newTop = maxTop;
		}
		this.obj.style.top = newTop;
		
		//set the left
		if(this.targetLeft > -1){
		  this.obj.style.left = this.targetLeft + document.body.scrollLeft; 
	  }
		if(this.targetRight > -1){
			var newLeft = document.body.clientWidth - this.targetRight - this.obj.style.width.substr(0,this.obj.style.height.length-2);
		  this.obj.style.left = newLeft + document.body.scrollLeft; 
		}
	}
	function addAD(aAD){
		ads.push(aAD);
	}
	function moveADs(){
		for(var i=0; i<ads.length; i++){
			ads[i].move();
		}
	}
</SCRIPT>


使用方法:
1. 把以上控制广告的js代码引用到页面里。
2. 在页面上任何地方(当然要在body里边)加上广告元素,例如:
<div id="ad1" style="width:100px; height:180px; position:absolute; background-color:red">asdfa</div>
<div id="ad2" style="width:100px; height:180px; position:absolute; background-color:red">asdfaf</div>
   其中下边的字段是必须设置的:id 和 style里的width,height,position:absolute。这里设置为红色只是为了让广告看起来明显。
3. 添加广告的初始化函数,例如initADs,在函数initADs 中加入要设置为浮动的广告,可以参照下边的例子
	function initADs(){
		//举例添加两个广告,离顶部200。第一个靠左,距离左边2;第二个靠右,距离右边2
		addAD(new FlowAD(window.ad1, 200, 2, -1));
		addAD(new FlowAD(window.ad2, 200, -1, 2));
	}

4. 必须设置window.onresize和window.onscroll事件为moveADs,并且保证在页面载入之后能调用initADs,例如使用下边方法:
<SCRIPT LANGUAGE="JavaScript">
	window.onload = initADs;
	window.onresize = moveADs;
	window.onscroll = moveADs;
</SCRIPT>


//欢迎批评,建议,请致E-mail: zyongsheng83@163.com
3
0
分享到:
评论

相关推荐

    JavaScript网页特效范例宝典源码

    实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...

    城市分类信息网站系统.zip

    该系统适合作为城市门户的一个频道,我们可针对您的城市门户网站通行证接口标准,提供会员通行证接口定制。 [系统特点和优越性] [&gt;]灵活的可视化模版引擎 采用可视化模版引擎,每个频道可设置使用不同模版套系...

    第六代智能建站系统 v1.0

    网站广告系统 - 具有页内广告、浮动广告、弹出窗口、挂角广告等多种形式  访问统计系统 - 网页访问统计分析  投票调查系统 - 设置投票组,任意插入模版  友情链接系统 - 支持文本和图片链接  模版...

    锐新办公用品行业建站系统 v5.0 PHP MYSQL.rar

    - 通过后台编辑,可以轻松编辑图片/文字形式logo网页防盗功能 - 通过一个按钮实现网页防拷贝功能 访问统计系统 - 网页访问统计分析 投票调查系统 - 设置投票组,任意插入模版 风格自由切换功能 - 后台可随意更换网站...

    第六代智能建站系统 v1.0.rar

    网站广告系统 - 具有页内广告、浮动广告、弹出窗口、挂角广告等多种形式 访问统计系统 - 网页访问统计分析 投票调查系统 - 设置投票组,任意插入模版 友情链接系统 - 支持文本和图片链接 模版插件设置 - 通过...

    企业建站自助管理系统 V5.1.zip

    网站广告系统 - 具有页内广告、浮动广告、弹出窗口、挂角广告等多种形式 访问统计系统 - 网页访问统计分析 投票调查系统 - 设置投票组,任意插入模版 友情链接系统 - 支持文本和图片链接 模版插件设置 - ...

    SongCMS企业建站系统 ASP版 v1.1

    网站广告系统 - 具有页内广告、浮动广告、弹出窗口、挂角广告等多种形式 访问统计系统 - 网页访问统计分析 投票调查系统 - 设置投票组,任意插入模版 友情链接系统 - 支持文本和图片链接 模版插件设置 - 通过后台...

    javascript 原创入门教程(ppt格式)

    原创JavaScript入门教程,不用先学语法的学习方式,系列教程之六至九章! 06 辨析表达式的结果 07 九九乘法表的显示 08 状态栏的控制 09 网页浮动广告的制作

    专业网上商店程序PHP PRO3.0

    广告发布系统 - 具有轮播广告、页内广告、浮动广告、弹出窗口、挂角广告等多种形式 查询统计系统 - 包括帐务查询统计、订单查询统计、商品销售统计功能,可输出EXCEL报表 访问统计系统 - 网页访问统计分析 投票...

    分类信息源码2015版绿色风格 v4.5

    自由创建栏目频道,可设置频道使用不同模版 相关资讯系统 - 可以针对某个分类信息栏目发布相关文章资讯 信息评论系统 - 可针对每条信息发布评论 网站广告系统 - 具有轮播广告、页内广告、浮动广告、弹出窗口、...

    商贸信息网站系统 v5.0 简繁体中文版

    &lt;br&gt;[&gt;]灵活的网站广告管理系统 具有轮播广告、页内广告、弹出窗口、浮动广告、对联广告、挂角广告等广告形式; 可任意创建页内广告,生成广告插件标签,插入模版中任意位置。 &lt;br&gt;[&gt;]网站辅助功能丰富...

    MediPro学校网站系统

    网站广告系统 - 具有页内广告、浮动广告、弹出窗口、挂角广告等多种形式 访问统计系统 - 网页访问统计分析 投票调查系统 - 设置投票组,任意插入模版 友情链接系统 - 支持文本和图片链接 模版插件设置 - 通过...

    net 二手车程序源码

    各栏目均可设置不同的弹出窗口、浮动广告、对联广告、挂角广告等非定位广告;和页内广告、轮播广告等定位广告 [&gt;]网站辅助功能丰富 具有访问统计系统、投票调查系统、友情链接系统、数据备份系统等网站辅助工具 ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...

    java源码包---java 源码 大量 实例

    6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...

    java源码包2

    6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...

    JAVA上百实例源码以及开源项目

    6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...

    JAVA上百实例源码以及开源项目源代码

    6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...

    java源码包3

    6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...

Global site tag (gtag.js) - Google Analytics