获得el所在的第一级zoom父元素的zoom值及该父元素left/top偏移量

获取元素的缩放值及偏移量

最新推荐文章于 2024-07-01 10:25:53 发布

最新推荐文章于 2024-07-01 10:25:53 发布 · 300 阅读

本文提供了一个JavaScript函数，用于获取指定元素所在的第一级zoom父元素的zoom值及该父元素的left/top偏移量。适用于Firefox、IE、Chrome等浏览器。

/*
		 * 获得el所在的第一级zoom父元素的zoom值及该父元素left/top偏移量
		 * @param {htmlEl} el 目标元素
		 * @return {Object}
		 * <p>Object.value {Number} 默认-1</p>
		 * <p>Object.top {Number} 父元素的offsetTop + 顶部空白 </p>
		 * <p>Object.left {Number} 父元素的offsetLeft + 左边空白 </p>
		 */
		getZoomArgs : function(el) {
			// 标示缩放的css属性
			var zoomPer, undefinedPer = 'none';
			if(S.UA['firefox']) {
				zoomPer = '-moz-transform';
			} 
			else if(S.UA['ie']) {
				if(S.UA['ie'] == 9) {
					zoomPer = '-ms-transform';
				} else {
					zoomPer = 'zoom';
					undefinedPer = 'normal';
				}
			}
			else {
				zoomPer = '-webkit-transform';
			}
			
			// 获得el所在的第一级zoom父元素的zoom值及该父元素left/top偏移量。
			var zoomArgs = $(el).parents().map(
				function(index, el) {
					if($(el).css(zoomPer) != undefinedPer) {
						var ret;
						if(S.UA['ie'] && S.UA['ie']<9) {
							ret = {
								value : el.style.zoom || -1,
								top : $(el).offset().top + $(el).children().first().offset().top,
								left : $(el).offset().left + $(el).children().first().offset().left
							};
						} else {
							var temp = $(el).css(zoomPer),
								start = temp.indexOf('(') + 1,
								end = temp.indexOf(',');
							ret = {
								value : temp.substring(start, end) || -1,
								top : $(el).offset().top + $(el).children().first().offset().top,
								left : $(el).offset().left + $(el).children().first().offset().left
							};
						}
						return ret;
					}
				}
			).get(0);
			return zoomArgs;
		}