jQuery插件floatIt，浮动div并居中在上方或者下方

 

网上找的太重量级了，写了个轻量级的。满足自己的需求就好，以后再加各种浮动，比如右下角之类的。

/*
 * jQuery float it plugin
 * Version 1.0 (8-July-2010)
 * @requires jQuery v1.4 or later
 *
 * Copyright (c) 2009-2010 Tony ZHOU
 * Dual licensed under the MIT and GPL licenses:
 */
 
jQuery.fn.floatIt = function (options) {
    //parameter like { location: "bottom" } or { location: "top" }
    // by extending the default settings, we don't modify the argument
    settings = jQuery.extend({ location: "bottom" }, options);

    var h = $(window).height();
    var w = $(window).width();

    var topLocation = 0;
    var leftLocation = w / 2 - $(this).width()/2;

    var currentId = $(this).attr("id");

    switch (settings["location"].toLowerCase()) {
        case ("bottom"):
            topLocation = h - $(this).width();
            $(window).scroll(function () {
                var topLocation = $(document).scrollTop() + $(window).height() - $("#" + currentId).height(); //closure
                $("#" + currentId).css({ position: "absolute", top: topLocation, left: leftLocation });
            });
            break;
        case ("top"):
            topLocation = 0;
            $(window).scroll(function () {
                var topLocation = $(document).scrollTop(); //closure
                $("#" + currentId).css({ position: "absolute", top: topLocation, left: leftLocation });
            });
            break;
        default:
            topLocation = h - $(this).width();
            break;
    }

    $(this).css({ position: "absolute", top: topLocation, left: leftLocation });
};

用起来的时候直接$("divname").floatIt()，默认是bottom.

效果就是这样

要完整例子的话请移步到 http://www.iamtonyzhou.com/javascript/jquery-plugin-float-div-on-the-top-or-bottom-and-keep-it-in-the-center/

点击下图的链接下载

转载于:https://www.cnblogs.com/beyondjay/archive/2010/07/09/1773908.html