`
zyongsheng83
  • 浏览: 43262 次
  • 性别: 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
分享到:
评论

相关推荐

    JS网页浮动广告

    总结,JS网页浮动广告是通过HTML、CSS和JS结合实现的一种网页广告形式,它可以是可关闭的或不可关闭的,通过监听用户交互和动态修改元素样式来达到浮动和显示控制的效果。为了提高用户体验,通常会考虑添加动画效果...

    网页浮动广告代码 非常好在右侧

    网页浮动广告代码是一种常见的网页设计技术,用于在页面上创建动态显示的广告。这些广告通常位于页面的侧边栏或屏幕边缘,随着用户滚动页面而始终保持可见,从而提高广告的曝光率和点击率。在本篇文章中,我们将深入...

    网页浮动广告窗口

    总结来说,网页浮动广告是通过JavaScript和CSS相结合的方式实现的,利用`position`属性实现定位,`Z-INDEX`控制层级,`scrollTop`处理滚动事件,以及`setInterval`定时执行函数来实现动态效果。这种方式可以提高广告...

    网页上的浮动广告

    网页上的浮动广告是一种常见的网络营销手段,它以动态或者静态的形式出现在网页的某个角落,随着用户滚动页面而始终保持在屏幕的可见范围内。这种广告设计的主要目的是提高用户的关注度,从而增加品牌曝光率和潜在的...

    网页两侧的浮动对联广告

    本压缩包包含两个浮动对联广告的实例,一个带有关闭按钮,另一个则没有。 首先,我们要理解浮动对联广告的工作原理。在网页布局中,浮动对联广告通常被设置为固定在页面的左侧或右侧,随着用户滚动页面,它们始终...

    浮动广告 左右广告浮动广告 左右广告

    根据给定文件的信息,我们可以提炼出与“浮动广告”相关的几个关键知识点,包括浮动广告的基本概念、实现原理、以及在实际网页开发中的应用等。 ### 一、浮动广告的概念 浮动广告是一种常见的在线广告形式,它能够...

    淘宝网图片浮动广告代码

    淘宝网图片浮动广告代码是一种常见的网页交互元素,用于吸引用户注意力并提高网站的广告效果。在网页设计中,这种广告通常会随着用户滚动页面而上下移动,保持在用户的视野范围内。这种技术结合了JQuery库、div+css...

    网站页面的浮动广告小代码

    标题与描述概述的知识点主要集中在网页设计中的浮动广告实现方式上。这涉及到前端开发中HTML、CSS以及JavaScript的综合运用,旨在使广告在用户浏览网页时保持动态或半静态的位置,既达到展示目的又不干扰用户体验。...

    常见的网页浮动广告代码

    网页浮动广告是网络广告设计中常见的一种形式,它能够在用户浏览网页时持续显示,从而提高广告的曝光率和点击率。下面将详细讲解十种常见的网页浮动广告代码及其实现方式,帮助你提升网站的互动性和功能性。 1. **...

    html浮动广告,靠边换图

    在网页设计中,"HTML浮动广告,靠边换图"是一种常见的交互式设计技术,用于吸引用户的注意力并展示促销信息。...在实际项目中,可以参考提供的“浮动广告”文件进行学习和实践,不断探索和提升网页设计技能。

    简洁易用的jQuery左右对称浮动广告代码.zip

    "简洁易用的jQuery左右对称浮动广告代码"是一个专门针对网页广告设计的jQuery插件,特别适合于创建对联广告,也就是在页面两侧浮动显示的广告条幅。 首先,我们要理解什么是对联广告。对联广告通常是指位于网页两侧...

    网页右下角浮动广告框

    网页右下角浮动广告框是一种常见的网页交互设计,它利用JavaScript(js)技术来实现在用户浏览页面时,广告或通知元素始终出现在屏幕右下角的功能。这种设计旨在吸引用户的注意力,同时尽量不干扰主要内容的浏览体验...

    清除网页中浮动广告和动态图片的方法.docx

    然而,这种方法并不能完全消除所有的浮动广告,尤其是那些嵌入在网页HTML代码中的广告。对于这种情况,可以考虑使用浏览器扩展或广告拦截插件。例如,AdBlock Plus、uBlock Origin等都是非常受欢迎的广告拦截工具,...

    HTML图片随意浮动广告效果代码

    HTML图片的浮动广告效果是网页设计中常见的交互元素,它能吸引用户的注意力并提供互动体验。这个效果通常用于展示广告、推广信息或者动态提示。在本文中,我们将深入探讨如何利用HTML和CSS实现图片的浮动广告效果。 ...

    左右浮动广告无抖动可关闭隐藏式 对联广告 亲测保证能用

    本教程将详细讲解如何实现标题所描述的“左右浮动广告无抖动可关闭隐藏式对联广告”,并确保其在全站范围内的有效应用。 首先,我们要理解“左右浮动”的概念。在CSS布局中,浮动(float)属性用于创建浮动元素,...

    javascript浮动广告

    在本话题中,我们关注的是如何使用JavaScript实现一种特定的广告展示方式——浮动广告。这种广告通常会在网页的角落或者侧边栏中持续移动,吸引用户的注意力。当用户将鼠标悬停在广告上时,广告的移动会暂停,以提供...

    网站浮动广告

    网站浮动广告是一种常见的在线营销策略,它通过在网页的侧边或者上下角等位置设置持续移动的广告,吸引用户的注意力,提高品牌曝光度或产品推广效果。这种广告形式设计的关键在于平衡用户体验与广告效果,避免过于...

    div两侧浮动广告 可隐藏 附加非div两侧浮动

    例如,如果我们想要在左侧创建一个浮动广告,可以这样设置 CSS: ```css #ad-left { float: left; width: 300px; /* 广告的宽度 */ } ``` 对于右侧的广告,只需要将 `float` 属性改为 `right`: ```css #ad-...

    淘宝浮动广告

    1. **HTML 结构**:浮动广告首先需要通过 HTML 代码来创建基本的结构,这可能包括一个 `&lt;div&gt;` 元素,用于包裹广告内容,以及内嵌的图片、文字和其他元素。 2. **CSS 样式**:CSS(层叠样式表)是控制网页样式的...

    新浪首页左侧的Js浮动广告代码

    在互联网页面设计中,广告是网站收入的重要来源之一,而浮动广告作为...而代码fans.net这个文件名可能是指一个网络资源,可能是提供该代码的网站或者是相关的开发者社区,可以去这个网站寻找更多相关的学习资料和讨论。

Global site tag (gtag.js) - Google Analytics