JavaScript对联式浮动广告

原创 2013年05月22日 21:11:58

摘自:http://www.111cn.net/js_a/73/3504e367c04f83f9626cf9811a52c33b.htm


var delta = 0.8;
var collection;
var closeB = false;

function floaters() {
	this.items = [];
	this.addItem = function(id, x, y, content) {
		document.write('<DIV id=' + id + ' style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:' + (typeof(x) == 'string' ? eval(x) : x) + ';top:' + (typeof(y) == 'string' ? eval(y) : y) + '">' + content + '</DIV>');

		var newItem = {};
		newItem.object = document.getElementById(id);
		newItem.x = x;
		newItem.y = y;

		this.items[this.items.length] = newItem;
	}
	this.play = function() {
		collection = this.items
		setInterval('play()', 30);
	}
}

function play() {
	if (screen.width <= 800 || closeB) {
		for (var i = 0; i < collection.length; i++) {
			collection[i].object.style.display = 'none';
		}
		return;
	}
	for (var i = 0; i < collection.length; i++) {
		var followObj = collection[i].object;
		var followObj_x = (typeof(collection[i].x) == 'string' ? eval(collection[i].x) : collection[i].x);
		var followObj_y = (typeof(collection[i].y) == 'string' ? eval(collection[i].y) : collection[i].y);

		if (followObj.offsetLeft != (document.body.scrollLeft + followObj_x)) {
			var dx = (document.body.scrollLeft + followObj_x - followObj.offsetLeft) * delta;
			dx = (dx > 0 ? 1 : -1) * Math.ceil(Math.abs(dx));
			followObj.style.left = followObj.offsetLeft + dx;
		}

		if (followObj.offsetTop != (document.body.scrollTop + followObj_y)) {
			var dy = (document.body.scrollTop + followObj_y - followObj.offsetTop) * delta;
			dy = (dy > 0 ? 1 : -1) * Math.ceil(Math.abs(dy));
			followObj.style.top = followObj.offsetTop + dy;
		}
		followObj.style.display = '';
	}
}

function closeBanner() {
	closeB = true;
	return;
}

var theFloaters = new floaters();
//
theFloaters.addItem('followDiv1', 'document.body.clientWidth-86', 80, '<img src="ad.jpg" style="height:450px; width:80px;"><br><img src=images/close.gif onClick="closeBanner();">');
theFloaters.addItem('followDiv2', 6, 80, '<img src="ad.jpg" style="height:450px; width:80px;"><br><img src=images/close.gif onClick="closeBanner();">');
theFloaters.play();


如果出现无法随滚动条上下滚动的问题,请参考:http://hi.baidu.com/rwzwknskrsbfmoq/item/ecc1613f3e8549fe97f88d5f

document.body.scrollTop值为0的解决方法

做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样,

window.onscroll=function () {
    var oFix=document.getElementById("divfix");
    oFix.style.top=document.body.scrollTop+"px";
}

可是怎么没有达到预期效果呢,输出document.body.scrollTop的值一看,一直都是0.原来是DTD的问题,要是页面直接用<html>开头的话就没有问题了.但是要符合web标准,DTD当然是不能少的.使用DTD时用document.documentElement.scrollTop代替document.body.scrollTop就可以了

window.onscroll=function () {
    var oFix=document.getElementById("divfix");
    oFix.style.top=document.documentElement.scrollTop+"px";
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

html+javascript实现广告窗自由浮动

首先介绍一种设置div初始位置的定位方法: .html代码如下: 层的移动 #ad{width:120px;height:120px;background:url(images/def...
  • yayun0516
  • yayun0516
  • 2014年11月27日 14:44
  • 3902

JS 左右两侧浮动广告

左右两侧浮动广告  
  • hzw2312
  • hzw2312
  • 2014年12月07日 10:02
  • 3852

在Android迷你广告上添加浮动的关闭按钮

在开发Android应用时,有是为了收益会增加一些广告。但是广告不断的滚动显示,又很烦人,降低用户体验,所以就需要增加一个关闭的按钮来隐藏或者关闭广告。有的应用是直接将关闭广告的功能做到了设置界面里边...
  • xxdddail
  • xxdddail
  • 2014年04月10日 09:28
  • 2495

页面左右两边跟随式广告框

当我们浏览一些网页时我们会发现页面的的边上会有广告图片,当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动(这里我叫它为广告框)。一些网页的广告框是固定在浏览器上的用background:fixe...
  • m0_37460263
  • m0_37460263
  • 2017年03月02日 18:03
  • 490

JS上下自动漂浮广告,可关闭

一不懂开发的朋友,需要一个左右浮动显示的广告,网上找了一个,放在这里,希望对大家有用。 很简单,只是想能给大家节省一部分时间 JavaScript">     // 这是关闭飘浮广告的宽度,请...
  • xiao190128
  • xiao190128
  • 2017年03月15日 20:59
  • 698

JavaScript - 浮动广告窗口实例

浮动广告窗口 浮动广
  • wangzi11322
  • wangzi11322
  • 2015年04月26日 08:27
  • 1626

基于JQuery网页漂浮广告窗口Js详解

网页类似广告漂浮窗口的制作思路以及详细代码
  • u011427035
  • u011427035
  • 2016年04月06日 09:38
  • 6455

JS上下自动漂浮广告,可关闭

一不懂开发的朋友,需要一个左右浮动显示的广告,网上找了一个,放在这里,希望对大家有用。 很简单,只是想能给大家节省一部分时间     // 这是关闭飘浮广告的宽度,请根据你的广...
  • airingyuan
  • airingyuan
  • 2014年12月08日 21:56
  • 3494

清除页面广告,一款简易的chrome扩展

大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球。 当然有现成的扩展程序...
  • cddcj
  • cddcj
  • 2016年11月17日 16:43
  • 830

基于JavaScript代码去掉H5页面中的头尾及广告部分(支持 Android 和 iOS)2(难度升级)

前段时间做了一篇总结:基于JavaScript代码去掉H5页面中的头尾及广告部分(支持 Android 和 iOS),不过好景不长,黑科技和反常规的技术又来了,情况是这样的,如果div 被 id 或...
  • mapboo
  • mapboo
  • 2016年06月15日 12:12
  • 2098
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript对联式浮动广告
举报原因:
原因补充:

(最多只允许输入30个字)