[菜鸟自学四]浮动广告

GoodNess2010 2010-03-20 08:40:40

程序代码



<!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=utf-8" /> 

<title>浮动广告</title> 

<style>

#ad{ position:absolute; display:none; }

#show { width:200px; height:35px; line-height:35px; background-color:#009900; color:#FFF; text-align:center; font-size:12px; font-weight:bold; cursor:pointer; }

</style>

</head> 

<body> 

<div id="show">点击演示浮动广告</div>

<div id="ad"><img src='http://www.cnblogs.com/images/cnblogs_com/goodness2010/238089/o_2009Cherry.gif' /></div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<script>

// JS浮动广告

// @date: 2010-03-19

// @auther: goodNess2010

// @version: beta 0.1

var floatAd = {};



floatAd.getScrollTop = function(node) {

	var doc = node ? node.ownerDocument : document;

	return doc.documentElement.scrollTop || doc.body.scrollTop;

};



floatAd.getScrollLeft = function(node) {

	var doc = node ? node.ownerDocument : document;

	return doc.documentElement.scrollLeft || doc.body.scrollLeft;

};



floatAd.getBrowser = function() {

	var d = document.documentElement;

	return {

		width: window.innerWidth || (d && d.clientWidth) || document.body.clientWidth,

		height: window.innerHeight || (d && d.clientHeight) || document.body.clientHeight

	}

};



floatAd.extend = function(destination, source) {

	for(var property in source) {

		destination[property] = source[property];

	}

	return destination; 

};



/* 默认属性扩展 */

floatAd.setOptions = function(options) {

	this.options = {

		delay: 20,		// 调整速率

		fadeTime: 1		// 自动消失时间

	};

	return this.extend(this.options, options || {});

};



/* 类初始化 */

floatAd.init = function(id, options) {

	var _this = this;

	this.extend(this, this.setOptions(options));

	

	this.control = document.getElementById(id);

	var _callback = function() {		// fadeIn完成后的回调函数

		_this.timer = window.setInterval(function() { _this.scroll() }, _this.delay);  // 滚动定位

		window.setTimeout(function() { _this.fadeOut() }, _this.fadeTime * 1000); // 在固定时间内消失

	}

	this.fadeIn(_callback);

	window.onresize = function() { _this.setCenter(); }

};



/* 定时滚动 */

floatAd.scroll = function() {

	this.start = parseInt(this.control.style.top, 10);

	this.end = parseInt(this.getScrollTop() + this.getBrowser().height - this.control.clientHeight, 10);

	if(this.start != this.end) {

		this.amount = Math.ceil(Math.abs(this.end - this.start) / 15); /* 递减公式(this.start无限增大,整个分子无限减小,整个值就无限趋近于0) */

		this.control.style.top = parseInt(this.control.style.top, 10) + ((this.end < this.start) ? -this.amount : this.amount) + 'px';

	}

};



/* 目标居中并处于最底部 */

floatAd.setCenter = function() {

	this.top = this.getScrollTop() + floatAd.getBrowser().height;

	this.left = (this.getScrollLeft() + floatAd.getBrowser().width - this.control.clientWidth) / 2;

	this.control.style.top = this.top + 'px';

	this.control.style.left = this.left + 'px';	

};



/* fadeIn */

floatAd.fadeIn = function(callback) {

	var _this = this,  _top = 0;

	this.control.style.display = 'block'; // *要提前显示.不然无法取得clientWidth

	this.setCenter();

	var _timer = window.setInterval(function() {

		_this.control.style.top = _this.getScrollTop() + _this.getBrowser().height - (++_top) + 'px';

		if(_top >= _this.control.clientHeight) {

			window.clearInterval(_timer);

			callback && callback();

		}

	}, 2);

};



/* fadeOut */

floatAd.fadeOut = function() {

	var _this = this, _num = 0, _top = _this.control.clientHeight;

	window.clearTimeout(this.timer);

	var _timer = window.setInterval(function() {

		if(_top <= 0) {

			window.clearInterval(_timer);

			_this.control.style.display = 'none';

		} else {

			_this.control.style.top = _this.getScrollTop() + _this.getBrowser().height - (--_top) + 'px';

		}

	}, 2);

	this.control.style.top = (parseInt(this.control.style.top, 10) + 100) + 'px';

};

var newAd = 'start';

document.getElementById('show').onclick = function() {

	if(newAd == 'start') {

		newAd = floatAd.init('ad', { fadeTime: 10 });

	}

}

</script>



</body> 

</html>

详细原理和代码请参见:
http://www.cnblogs.com/goodness2010/archive/2010/03/20/1690622.html

现在虽然程序很菜.但我相信只有通过不断实践才能提高自己.希望大家多多支持我.一起进步.

[声明]
今天为了让博客美观一些.直接用了cloudgamer大侠的博皮.

...全文