您的位置:首页 > Web前端 > JQuery

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

2010-07-09 10:30 931 查看
网上找的太重量级了,写了个轻量级的。满足自己的需求就好,以后再加各种浮动,比如右下角之类的。

/*
* 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/

点击下图的链接下载

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: