Как увеличить изображение, закрепив его в определенном углу?

Question

Я экспериментирую со свойством CSS zoom и пытаюсь в основном увеличить изображение, сохраняя его привязанным к определенной точке.Поэтому вместо увеличения, пока точка 0,0 остается на месте, я бы хотел вместо этого увеличить зум из нижнего правого угла.

Так что это моя попытка, но, очевидно, она немного «причудливая»:

Fiddle: http://jsfiddle.net/csaltyj/nJ2M8/

HTML:

<div id="overlay">
    <div class="square">
        <img src="http://placekitten.com/800/800" width="400" height="400" />
    </div>
</div>

Javascript:

$('.square img').on('click', function() {
    $('.square').animate({
        zoom: '200%',
        left: '-200px',
        top: '-200px'
    }, 200);
});

CSS:

#overlay {
    overflow: hidden;
    width: 400px;
    height: 400px;
}

.square {
    position: relative;
    width: 320px;
    height: 320px;
    background: #333;
    vertical-align: bottom;

    font-size: 2em;
    font-family: Impact, Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
}

Есть ли способ заставить его вести себя так, как я бы хотел?Мне нужно 400 400 углов, чтобы они оставались на месте, так как они увеличиваются.

Answer 1

Если вы хотите увеличить центр изображения, измените:

    left: '-200px',
    top: '-200px'

На:

    left: '-50%',
    top: '-50%'

Вот демоверсия: http://jsfiddle.net/nJ2M8/1/

Обновление

Попробуйте использовать transform, он способен масштабировать элемент.Вот код, который я написал некоторое время назад, чтобы сделать это:

$(function () {
    var venderTransform = ($.browser.webkit)  ? 'WebkitTransform' :
                      ($.browser.mozilla) ? 'MozTransform' : 
                      ($.browser.msie)    ? 'MsTransform' : 
                      ($.browser.opera)   ? 'OTransform' : 'transform'


    $('.square').each(function () {
        $.data(this, 'scale', 3);
    }).bind('mousewheel', function (event, delta) {
        event.preventDefault();

        var sc = $.data(this, 'scale');

        if ((delta == 1 && sc < 5) || (delta == -1 && sc > 1)) {
            sc += delta;
            $.data(this, 'scale', sc);
            $(this).children('img').css(venderTransform, 'scale(' + sc + ')');
        }
    }).bind('mousemove', function (event) {
        var sc = $.data(this, 'scale') || 1;//scale
        if (sc > 1) {
            var $this = $(this),
                X  = (typeof(event.offsetX) == 'undefined') ? (event.pageX - $this.offset().left) : (event.offsetX),//current cursor X position in bullet element
                Y  = (typeof(event.offsetY) == 'undefined') ? (event.pageY - $this.offset().top) : (event.offsetY),//current cursor Y position in bullet element
                w  = 400,//width of thumbnail
                h  = 400,//height of a thumbnail
                nX = ((w / 2) - X),//new X
                nY = ((h / 2) - Y),//new Y
                tf = 'translate(' + (nX * (sc - 1)) + 'px, ' + (nY * (sc - 1)) + 'px) scale(' + sc + ')';//transform string
            $this.children('img').css(venderTransform, tf);
        }
    }).bind('mouseleave', function () {

        //reset .has-thumb element on mouseleave
        $.data(this, 'scale', 3);
        $(this).children('img').css(venderTransform, 'translate(0, 0) scale(1)');
    });
});

Вот демонстрация: http://jsfiddle.net/nJ2M8/2/ (масштабирование следует за вашим курсором, и вы можете использовать колесо мыши для увеличениявход / выход)

Answer 2

Измените свой jQuery на следующее

$(".square img").click(function(e){
      $('.square img').animate({
        zoom: '+=.5'
      }, 600);
      $('.square').animate({
        left: '-=' + e.pageX,
        top: '-=' + e.pageY
      });
});

Это позволит вам увеличить, где пользователь нажимает.