【jQuery插件】capacityFixed类似于新浪微博新消息提示的定位框

HTML代码：

<div class="float" id="float">
<p id="WB_unread_msg_1303891276971">1条新私信，<a href="http://www.css88.com/">查看私信</a></p>
<p id="WB_unread_msg_1303891276972">10条新消息，<a href="http://www.css88.com/">查看消息</a></p>
<p id="WB_unread_msg_1303891276973">108个新粉丝，<a href="http://www.css88.com/">查看粉丝</a></p>
<a href="#" title="关闭" id="" class="close-ico">关闭</a>
</div>

CSS代码：

.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.float .close-ico{ position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; background-image:url(img/close-ico.png); text-indent:-900px; overflow:hidden; }
.float .close-ico:hover{ background-position:0 -16px;}
.float p{ line-height:22px}

JS代码：

/**
 * @author 愚人码头
 * 类似于新浪微博新消息提示的定位框
 * 更多
 */
(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);

        var FixedFun = function(element) {
            var top = opts.top;
            var right = ($(window).width()-opts.pageWidth)/2+opts.right;
            element.css({
                "right":right,
                "top":top
            });
            $(window).resize(function(){
                var right = ($(window).width()-opts.pageWidth)/2+opts.right;
                element.css({
                    "right":right
                });
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {

                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
		right : 100,//相对于页面宽度的右边定位
        top:100,
        pageWidth : 960
	};
})(jQuery);

转发自【http://www.css88.com/archives/3515】

愚人码头