JS 缩放指定的html元素

/*
		 * 缩放函数zoomIt,它实际缩放的是el的内部元素
		 * @param {htmlElemnt} el 缩放目标htmlElement
		 * @param {Number} xScale x方向缩放比例
		 * @param {Number} yScale y方向缩放比例
		 */
		zoomIt : function(el, xScale, yScale) {
			var S = KISSY,
				style = $(el).attr('style') || "";
			if(S.UA['firefox']) {
				// x轴方向和y方向分别缩放的比例
				$(el).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
				// 缩放后,相对于父元素左上角的偏移量
				$(el).css('transform-origin', '0px 0px');
			}
			else if(S.UA['ie'] >= 9) {
				$(el).css('-ms-transform', 'scale(' + xScale + ')');
				$(el).css('-ms-transform-origin', '0px 0px');
			}
			else if(S.UA['ie'] < 9) {
				$(el).css('zoom', xScale);
			}
			else {
				$(el).css('-webkit-transform', 'scale(' + xScale + ', ' +  yScale + ')');
				$(el).css('-webkit-transform-origin', '0px 0px');
			}
		}


在浏览器的判断是,这里使用了KISSY;在属性操作上,这里用JQ. 读者可以根据自己的习惯进行相应的修改。

你可能感兴趣的:(JavaScript,JavaScript)