/* 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 });
    }
}

下面给大家讲下这个程序的原理，附有示例下载哦。

程序原理

整个广告运行具有四步动作.

1. 初始化时隐藏于页面最底部.

2. 自底向上升起.直到整个广告漂浮出来

3. 启动检测.滚动时保持广告始终处于页面中间最底部.

4. 到达自定义间隔时间.广告自动渐隐.

整个实现最重要的就是控制广告距离文档(非窗口)最顶部的距离.(scrollTop + browser.clientHeight).这里提供了获取这几个值的代码.

获取scrollTop, scrollLeft

注意Chrome和Safari即使在标准doc模式下的根文档也是document.body而不是document.documentElement