jquery 居中显示自定义方法

来源:互联网 发布:echarts 地图动态数据 编辑:程序博客网 时间:2024/06/17 21:04
<p><pre name="code" class="plain">说明简单使用:$('#cbox1').center();不是所有人都喜欢让某元素垂直居中,同时想要它跟随屏幕滚动的话,可以这样配置(所有在此合理配置的CSS样式都将被应用):$('#cbox2').center({position:'fixed',top:'30%'});要让#cobx1脱离父容器(假定它是静态定位)的话:$('#cbox1').center({relative:false});更多的要求就要再次扩展了。代码(function ($) {  $.fn.center = function (settings) {    var style = $.extend({      position: 'absolute', //absolute or fixed      top     : '50%', //50%即居中,将应用负边距计算,溢出不予考虑了。      left    : '50%',      zIndex  : 2009,      relative: true //相对于包含它的容器居中还是整个页面    }, settings || {});    return this.each(function () {      var $this = $(this);      if (style.top == '50%') style.marginTop = -$this.outerHeight() / 2;      if (style.left == '50%') style.marginLeft = -$this.outerWidth() / 2;      if (style.relative && !$this.parent().is('body') && $this.parent().css('position') == 'static') $this.parent().css('position', 'relative');      delete style.relative;      //ie6      if (style.position == 'fixed' && $.browser.version == '6.0') {        style.marginTop += $(window).scrollTop();        style.position = 'absolute';        $(window).scroll(function () {          $this.stop().animate({            marginTop: $(window).scrollTop() - $this.outerHeight() / 2          });        });      }      $this.css(style);    });  };})(jQuery);


                                             
0 0
原创粉丝点击