不影响页面正常加载，的首页图片广告js(含demo)

实现思路：

   等页面文档和所有文件加载完；

   再调用js加载广告图片；

   最后广告图片加载完成才，才切入广告图片；

   使用动画函数。

/*******  
*
*    功能描述：等网页内容全部加载完后，再后台加载广告图片，加载广告图片后在展开广告。
*   
*    使用时步骤：
*     （1）把<script type="text/javascript" src="ad.js"></script>引用于head标签内；
*     （2）在ad.js文件中尾巴找到如下代码进行相应的代码；
*     （3）如果有 && window.parent.frames["parent"].document.readyState == "complete"，删除。
*     
*    new AnimeAd({
*        780,        //广告的宽度
*        height: 300,       //广告的高度
*        speed: 2000,       //多少秒内完成展开广告
*        closeTime: 8000,   //自动关闭广告的时间
*        imgUrl: 'banner.png', //图片路径
*        url: 'http://www.zwbk.org' //点击广告后跳转的链接
*    });
*    author:dreamback@foxmail.com
*/

等待页面加载：         

if (document.readyState == "complete") //当页面加载状态为完全结束时进入 

等待广告图片加载完：

    loadImage:function(url, callback) {

    var img = new Image(); //创建一个Image对象，实现图片的预下载

        img.src = url;

    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数

         callback.call(img);

        return; // 直接返回，不用再处理onload事件

     }

     img.onload = function () { //图片下载完毕时异步调用callback函数。

         callback.call(img);//将回调函数的this替换为Image对象

     };

   }

 完整代码：

/*******  

* 

*    功能描述：等网页内容全部加载完后，再后台加载广告图片，加载广告图片后在展开广告。

*   

*    使用时步骤：

*     （1）把<script type="text/javascript" src="ad.js"></script>引用于head标签内；

*     （2）在ad.js文件中尾巴找到如下代码进行相应的代码；

*     （3）如果有 && window.parent.frames["parent"].document.readyState == "complete"，删除。

*     

*    new AnimeAd({

*         780,        //广告的宽度

*        height: 300,       //广告的高度

*        speed: 2000,       //多少秒内完成展开广告

*        closeTime: 8000,   //自动关闭广告的时间

*        imgUrl: 'banner.png', //图片路径

*        url: 'http://www.zwbk.org' //点击广告后跳转的链接

*    });

*    author:dreamback@foxmail.com

*/

(function () {

    function AnimeAd(options) {

        this.width = options.width;

        this.height = options.height;

        this.imgUrl = options.imgUrl;

        this.url = options.url;

        this.speed = options.speed || 1500;

        this.background = options.background || '#fff';

        this.close = true;

        this.closeTime = options.closeTime || 5000;

        this.init();

        this.settimeout = null;

        this.interval = null;

    };

    AnimeAd.prototype = {

        init: function () {

            var _this = this;

            document.onreadystatechange = pageFinished; //当页面加载状态改变的时候执行这个方法. 

            function pageFinished() {

                if (document.readyState == "complete") //当页面加载状态为完全结束时进入

                {

                    _this.loadImage(_this.imgUrl,function(){

                    var div = document.createElement('div');

                    var ad = document.body.insertBefore(div, document.body.childNodes[0]);

                    //设置样式

                    ad.style.margin = '0 auto';

                    ad.style.height = 0;

                    ad.style.overflow = 'hidden';

                    ad.style.position = 'relative';

                    ad.style.background = _this.background;

                    ad.innerHTML = '<a href="' + _this.url + '" target="_blank" style="display:block;margin:0 auto;height:'+_this.height+'px;'+_this.width+'px"><img src="' + _this.imgUrl + '" /></a>';

                    ad.innerHTML += '<div id="closeAd" style="position:absolute;100px;height:32px;right:0;bottom:0;background:red;color:#fff;line-height:32px;text-align:center;cursor:pointer;">CLOSE</div>';

                    

                    if (_this.close) {

                        _this.interval = _this.animate(ad, {

                            height: parseInt(ad.style.height)

                        }, {

                            height: _this.height

                        }, _this.speed, _this.easeInOut);

                        _this.close = false;

                        document.getElementById('closeAd').innerHTML = '关闭';

                        _this.closeAd(ad);

                    }

                    _this.settimeout = setTimeout(function () {

                        _this.animate(ad, {

                            height: parseInt(ad.style.height)

                        }, {

                            height: -parseInt(ad.style.height) + 32

                        }, _this.speed, _this.easeInOut);

                        _this.close = true;

                        document.getElementById('closeAd').innerHTML = '展开';

                    }, _this.closeTime);

                    });

                }

            }

        },

        closeAd: function (ad) {//按钮函数

            var _this = this;

            var toggleBtn = document.getElementById('closeAd');

            toggleBtn.onmousedown =  function () {

                _this.settimeout && clearTimeout(_this.settimeout);

                _this.interval && _this.interval();

                if (_this.close) {

                    _this.settimeout = _this.animate(ad, {

                        height: parseInt(ad.style.height)

                    }, {

                        height: _this.height - 32

                    }, _this.speed, _this.easeInOut);

                    toggleBtn.innerHTML = '关闭';

                    _this.close = false;

                } else {

                    _this.settimeout =  _this.animate(ad, {

                        height: parseInt(ad.style.height)

                    }, {

                        height: -parseInt(ad.style.height) + 32

                    }, _this.speed, _this.easeInOut);

                    toggleBtn.innerHTML = '展开';

                    _this.close = true;

                }

            }

        },

        animate: function (o, start, alter, dur, fx) {//动画函数

            var curTime = 0;

            var t = setInterval(function () {

                if (curTime >= dur) clearInterval(t);

                for (var i in start) {

                    o.style[i] = fx(start[i], alter[i], curTime, dur) + "px";

                }

                curTime += 40;



            }, 40);

            return function () {

                clearInterval(t);

            };

        },

        easeInOut: function (start, alter, curTime, dur) {//运动算子

            var progress = curTime / dur * 2;

            return (progress < 1 ? Math.pow(progress, 2) : -((--progress) * (progress - 2) - 1)) * alter / 2 + start;

        },

    loadImage:function(url, callback) {

    var img = new Image(); //创建一个Image对象，实现图片的预下载

        img.src = url;

    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数

         callback.call(img);

        return; // 直接返回，不用再处理onload事件

     }

     img.onload = function () { //图片下载完毕时异步调用callback函数。

         callback.call(img);//将回调函数的this替换为Image对象

     };

   }

    };

    new AnimeAd({

         780,        //广告的宽度

        height: 300,       //广告的高度

        speed: 1000,       //多少秒内完成展开广告

        closeTime: 4000,   //自动关闭广告的时间

        background:'#f90',

        imgUrl: 'http://images.cnblogs.com/cnblogs_com/dreamback/302151/r_banner.png', //图片路径

        url: 'http://www.zwbk.org' //点击广告后跳转的链接

    });

})();

猛击下载脚本

 

其它：不知道有没有办法用把这样效果图片广告换成，flash广告 。求高人指点...