【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】

愚人码头