0

我有一个脚本，它将使用 jquery 滑块调整图像的大小。该图像位于溢出隐藏容器内。但是我在缩小或缩小图像的中心时遇到了问题。我知道这可以通过在缩小时加上减去左边和顶部的值来完成。但无法找到一种方法来做到这一点。你可以查看我的脚本-

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/

有什么帮助吗？提前致谢。

4

1 回答 1

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/

于 2012-12-05T20:00:15.193 回答