jQuery侧面浮动对联广告

今天分享一款对联广告代码，实现原理：首先获得页面的高度，然后再获得装有图片的块级元素的高度计算页面的高度除于2在块级元素高度除于2，最后获得高度值赋值给块级容器，让块级容器始终保持页面高度居中的效果。在滚动页面时候通过定义一个动画的效果，让广告在0.4秒内移动到当前页面高度的中间。

分类：图片代码 > 广告难易：初级

查看演示下载资源下载积分： 20 积分

HTML

首先我们看下左右侧浮动广告及关闭按钮HTML代码：

<div class="fixediv leftadv">
    <a href="http://www.sucaihuo.com/"><img src="images/180.jpg" width="140" height="186" alt="性感美女" /></a>
    <a class="close" href="javascript:void(0);">关闭广告</a>
</div>

<div class="fixediv rightadv">
    <a href="http://www.sucaihuo.com/"><img src="images/280.jpg" width="140" height="186" alt="清纯美女" /></a>
    <a class="close" href="javascript:void(0);">关闭广告</a>
</div>

jQuery

接着我们调用floatadv插件：

$(function() {
    $(".fixediv").floatadv(); //广告浮动
});

关闭广告：

$(".fixediv a").click(function() { //关闭广告
    $(".fixediv").fadeOut(400);
});

floatadv插件封装方法：

jQuery.fn.floatadv = function(loaded) { 
    var obj = this;
    body_height = parseInt($(window).height());
    block_height = parseInt(obj.height());

    top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
    if (body_height < block_height) {
        top_position = 0 + $(window).scrollTop();
    }

    if (!loaded) {
        obj.css({
            'position': 'absolute'
        });
        obj.css({
            'top': top_position
        });
        $(window).bind('resize',
        function() {
            obj.floatadv(!loaded);
        });
        $(window).bind('scroll',
        function() {
            obj.floatadv(!loaded);
        });
    } else {
        obj.stop();
        obj.css({
            'position': 'absolute'
        });
        obj.animate({
            'top': top_position
        },
        400, 'linear');
    }
}