Osheep

时光不回头,当下最重要。

JavaScript进行缩放指定的html元素

在网页的一些变态需求中,总有那么几个坑,比如说进行元素的缩放!

当然啦,强中自有强中手!

我们来讲讲怎么实现吧,

主要是控制zoom属性进行缩放:

/*
 * 缩放函数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’]) {
        $(el).attr(‘style’, style + ‘transform: scale(‘ + xScale + ‘, ‘ + yScale + ‘); ‘ + ‘transform-origin: 0px 0px;’);
    } else if (S.UA[‘ie’] >= 9) {
        $(el).attr(‘style’, style + ‘-ms-transform: scale(‘ + xScale + ‘); ‘ + ‘-ms-transform-origin-x: 0px; -ms-transform-origin-y: 0px;’);
    } else if (S.UA[‘ie’] < 9) {
        $(el).css(‘zoom’, xScale);
    } else {
        $(el).attr(‘style’, style + ‘-webkit-transform: scale(‘ + xScale + ‘, ‘ + yScale + ‘); ‘ + ‘-webkit-transform-origin: 0px 0px;’);
    }
}

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

点赞