如何让一个方块上下左右居中
2015-09-24 02:20
531 查看
//构造函数 ;(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("<div class='big-mask'></div>"); $(".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();
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结