Изменение CSS свойств scale и zoom у элемента

#javascript #jquery #css #css3

                    
Как задать шаг изменения CSS свойств scale и zoom у элемента $('img')?

$(document).ready(function() {
    $(document).keypress(function(event) {
        a = $('img').height(); //height
        b = $('img').width(); //width

        c = parseInt(a) + 10; //width plus one step Intvalue
        d = parseInt(b) + 10; //height plus one step Intvalue

        e = parseInt(a) - 10; //width minus one step Intvalue
        f = parseInt(b) - 10; //height minus one step Intvalue

        if (event.keyCode == 107) {   //scale или zoom вместо width и height 

            $('img').css('width', d + 'px') //change css Intvalue + "px" 
            $('img').css('height', c + 'px') //change css Intvalue + "px"
        }
        if (event.keyCode == 109) {   //scale или zoom вместо width и height 

            $('img').css('height', e + 'px')//change css Intvalue + "px"
            $('img').css('width', c + 'px')//change css Intvalue + "px"
        }
    })                 

    

Ответы

Ответ 1

Идея реализация весьма схожа с предыдущим вопросом. Отличиями являются наличие parseFloat()
(потому что .css('свойство') возвращает String) и использование регулярного выражения
(взятого из этого вопроса) для получения значений scale из transform. 

HTML:


    



CSS:

#img1 {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    zoom: 100%;
    transform: scale(1, 1);
}


JS:

$(document).ready(function()
{    
    $(document).on("keypress", function(event)
    {
        var image = $('img');
        var imageZoom = parseFloat(image.css('zoom'));
        var imageTransform = image.css('transform');
        var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
            matches = imageTransform.match(matrixRegex);
        var scaleX = parseFloat(matches[1]);
        var scaleY = parseFloat(matches[2]);
        if (event.which == 43 || event.which == 45)
        {
            var zoomChange = (event.which == 43) ? 0.1 : -0.1;
            var scaleChange = (event.which == 43) ? 0.1 : -0.1;
            image.css('zoom', imageZoom + zoomChange);
            image.css('transform', 'scale(' + (scaleX + scaleChange) + ',' + (scaleY
+ scaleChange) + ')');
        }
    });
});


Пример в fiddle.