js ol.ui.mask

最新推荐文章于 2025-07-14 10:55:49 发布

weixin_33719619

最新推荐文章于 2025-07-14 10:55:49 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： ui 开发工具 javascript ViewUI

原文链接：https://my.oschina.net/wrean/blog/126897

本文介绍了一个用于网页的遮罩插件MaskerV0.2的JavaScript实现，该插件支持IE6、IE7、IE8及Firefox浏览器。文章详细展示了如何创建遮罩层并根据窗口大小自动调整其尺寸，同时提供了显示和隐藏遮罩的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

<!-- lang: js -->
/**
 * Masker V0.2
 * Last Update:2011-01-27
 *
 * FOR: IE6,IE7,IE8,Firefox
 * Usage:
 * 	cv.ui.masker.mask();
 * 	cv.ui.masker.unmask();
 */
(function(){
	var resize_function=function(){
		var css={};
		css.width=cv.ui.masker._bwidth;
		css.height=cv.ui.masker._bheight;
		cv.Cache.get("cv_mask").css(css);
	};
	var _default={
		css:{
			opacity:0.55,
			background:"#fff"
		}
	};
	cv.ui.masker={
		isShown:false,
		mask:function(options){
			var $=jQuery;
			var thix=cv.ui.masker;
			if(thix.isShown)return;
			options  = $.extend(true,{},_default, options);
			var mask=cv.Cache.get("cv_mask",function(){
				//init
				$(window).resize(function(){
					if(cv.ui.masker.isShown)return;
					cv.Cache.get("cv_mask").css({
						width: thix._bwidth(),
						height: thix._bheight()
					});
				});
				return $("<div id='cv_mask' class='cv_mask'></div>").appendTo('body').bgiframe();
			});
			//cv.Cache.get end

			/*if ($.browser.msie) {
				w= document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
			} else {
				w= thix._bwidth();
			}
			h= thix._bheight();*/
			thix.isShown=true;
			options.css.width=thix._bwidth();
			options.css.height=thix._bheight();
			options.css.visibility="visible";
			mask.css(options.css);
			$(window).bind("resize",resize_function);
		},
		unmask:function(){
			cv.ui.masker.isShown=false;
			cv.Cache.get("cv_mask").css({
				visibility:"hidden",
				width:0,
				height:0
			});
			jQuery(window).unbind("resize",resize_function);
		},
		//取得遮照高度
		_bheight:function() {
			var $=jQuery;
			if ($.browser.msie && $.browser.version < 7) {
				var scrollHeight = Math.max(
					document.documentElement.scrollHeight,
					document.body.scrollHeight
				);
				var offsetHeight = Math.max(
					document.documentElement.offsetHeight,
					document.body.offsetHeight
				);

				if (scrollHeight < offsetHeight) {
					return $(window).height();
				} else {
					return scrollHeight;
				}
			} else {
				return $(document).height();
			}
		},
		//取得遮照宽度
		_bwidth:function() {
			var $=jQuery;
			if ($.browser.msie && $.browser.version < 7) {
				var scrollWidth = Math.max(
					document.documentElement.scrollWidth,
					document.body.scrollWidth
				);
				var offsetWidth = Math.max(
					document.documentElement.offsetWidth,
					document.body.offsetWidth
				);

				if (scrollWidth < offsetWidth) {
					return $(window).width();
				} else {
					return scrollWidth;
				}
			} else {
				return $(document).width();
			}
		}
	};
})();

转载于:https://my.oschina.net/wrean/blog/126897