0

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/

何か助けはありますか？前もって感謝します。

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 に答える