[菜鸟自学四]浮动广告

程序代码<!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大侠的博皮.