Question

我有一个脚本，可以使用jquery滑块调整图像大小。图像位于溢出隐藏的conatiner内。但是在缩小或缩小时我在保持图像中心固定方面遇到了问题。我知道可以通过加减去左边和顶部的值来放大。但无法找到办法做到这一点。您可以查看我的脚本 -

var globalElement_width;
var globalElement_height;
$(document).ready(function(){
   $img=$('.canvas img');
   globalElement_width=$img.width();
   globalElement_height=$img.height();

   $( ".slider" ).slider({
       step: 1, 
       min: 0,
       max: 100,
       value: 0,
       slide: function( event, ui )
       {
        resize_img(ui.value);
       }
  });

  $('.canvas img').draggable();

});
function resize_img(val)
{
    var width=globalElement_width;
    var zoom_percen=width * 0.5; // Maximum zoom 50%
    var ASPECT = zoom_percen / 50;
    var zoom_value = val / 2;
    var size= width + ASPECT * zoom_value;

    $img = $('.canvas img');
    $img.stop(true).animate({
        width: size
    }, 250);
}

的jsfiddle -

http://jsfiddle.net/hirenbg89/Qv35B/5/

有任何帮助吗？提前谢谢。

Answer 1

您可以尝试将margin-top和margin-left更改为班次值的一半：

var d = ASPECT*zoom_value/2;
$img.stop(true).animate({
    marginTop: -d,
    marginLeft: -d,
    width: size
}, 250);

http://jsfiddle.net/dfsq/Qv35B/6/

使用Jquery保持中心修复的缩放图像

1 个答案: