InfoQ的广告效果

在InfoQ首页或内容页中，在网页的最底部总会弹出一个广告，等待一段时间后自动消失，在此对其实现代码整理如下：

html:<div id='div1'></div>

css:

        #div1{
            width:0;
            min-width:500px;
            height:0;
            min-height:50px;
            background-color:blue;
            position:fixed;
            bottom:0;
            left:0;
        }

Javascript页面中需要引入jQuery的脚本，除此之外的脚本为:

        $(function () {
            var $div1 = $('#div1');

            //如果是ie6单独定位
            var userAgent = navigator.userAgent;
            if (userAgent.indexOf('MSIE 6.0') !== -1) {
                var t = $(window).height() - 100;
                $div1.css({ 'position': 'absolute' }).offset({ left: 0, top: t });

                $(window).scroll(function () {
                    $div1.offset({ left: 0, top: t+$(window).scrollTop() });
                });
            }

            $div1.animate({ height: '100px', width: '100%' }, 500);
            setTimeout(function () {
                $div1.animate({ height: '0', width: '0', bottom: '-50px' }, 500);
            }, 5000);
        });

以上对IE6进行了单独设置，因为其不支持fixed，而其它浏览器则不用考虑。