[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