java上下左右_[Java教程]如何让一个方块上下左右居中

[Java教程]如何让一个方块上下左右居中

0

2015-09-16 16:00:04

//构造函数

;(function($, window, document,undefined){

var MaskLayer = function(ele, opt){

this.$element = ele,

this.defaults = {

width:'500px',

height:"500px",

backgroundColor:"#00baff",

display:"block"

},

this.options = $.extend({}, this.defaults, opt)

};

//方法

MaskLayer.prototype = {

mask: function() {

var _left,_top,_newWidth,_newHeight;

if($('div').is('.big-mask')){

$(".big-mask").css({display:"block"})

}else{

$("body").append("

$(".big-mask").css({

position:"fixed" ,

width:"100%",

height:"100%",

top:0,

left:0,

backgroundColor:"#000",

opacity: "0.5",

filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)",

zIndex: "99999"

});

}

console.log(this.$element);

this.$element.css({

backgroundColor:this.options.backgroundColor,

width:this.options.width,

height:this.options.height,

display:this.options.display,

zIndex: "999999",

position:"fixed"

});

_left = parseInt($(window).width()/2);

_top = parseInt($(window).height()/2);

_newWidth =_left-parseInt(this.options.width)/2;

_newHeight =_top-parseInt(this.options.height)/2; return this.$element.css({

'left': _newWidth,

'top':_newHeight

});

},

removeMask:function(){

this.$element.css({display:"none"});

$(".big-mask").css({display:"none"});

}

};

//myMaskLayer对象使用

$.fn.createMaskLayer = function(options) {

var masklayer = new MaskLayer(this, options);

return masklayer.mask();

} $.fn.maskRemove = function(options) {

var masklayer = new MaskLayer(this, options);

return masklayer.removeMask();

}})(jQuery, window, document);//调用方法$(".aaa").createMaskLayer({

backgroundColor:"#fff",

width:"300px",

height:"300px"

});$(".aaa").maskRemove();

本文网址：http://www.shaoqun.com/a/143441.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0