漂浮广告

代码演示

点击演示浮动广告

 

程序源码

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

 

程序原理

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

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

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

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

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

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

获取scrollTop, scrollLeft

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

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
    }
};

 

代码思路流程

初始化(init) -----> 设置居中并隐藏底部(setCenter) -----> 渐显(fadeIn) -----> 渐显完毕.调用回调函数_callback ----->

开始倒计时渐隐时间(setTimeout(fadeOut, time)), 并绑定实时检测函数(scroll) -----> 到达自定义时间隐藏广告(fadeOut)

使用说明

实例化函数.传入广告容器ID.设置默认属性.

默认属性有:

delay: 20,  // 调整速率
fadeTime: 1  // 自动消失时间(s)

var newAd = 'start';
document.getElementById('show').onclick = function() {
    if(newAd == 'start') {
        newAd = floatAd.init('ad', { fadeTime: 10 });
    }
}

 

这里为了演示方便.所以当点击按钮时候才初始化广告.也可以在window.onload的时候就载入广告.

 

代码示例下载