Javascript 图像放大/缩小在定位图像时工作不正常

我有以下用于图像放大/缩小的代码。问题是，当我尝试根据需要定位图像时，即我将左边距应用于图像或图像容器，即#查看它影响图像缩放（放大/缩小）–图像缩放后，图像开始向左移动（因为边距），如下面的小提琴链接所示。删除左边的边距使其再次正常运行。我想把它放在我想要的地方，而不影响缩放。如果我不清楚，请告诉我

/*******************js*******************
//当窗口准备就绪时，初始化。我们要和你一起去
//加载窗口而不是文档，以便
//知道我们的imageZoomInOut也将准备就绪（包括
//可获取维度）。
$（文档）.ready（函数（）{
//首先，让我们参考我们将要介绍的元素
//正在使用。
var视图=$（“#视图”）；
var imageZoomInOut=$（“.imageZoomInOut”）；
//创建缩放元素-这将与
//Javascript，因为它更像是一种“效果”。
var zoom=$（“
”）；
//在我们开始搞乱脚本之前，让我们
//更新显示以允许绝对值
//imageZoomInOut和zoomer的定位。
//基于视图设置显式的高度/宽度
//在imageZoomInOut的初始大小上。
view.width（imageZoomInOut.width（））；
view.height（imageZoomInOut.height（））；
//现在视图具有明确的宽度和高度，
//我们可以改变显示器的位置。
css（“位置”、“绝对”）；
//在imageZoomInOut上设置exlicit高度（以确保
//后来的一些计算没有得到
//搞砸了-我看到了一些不合理的计算高度
//行为）。
imageZoomInOut.height（imageZoomInOut.height（））；
//在添加缩放方块之前，我们需要它匹配
//imageZoomInOut的纵横比。
zoom.width（数学地板（imageZoomInOut.width（）/2））；
zoom.height（数学地板（imageZoomInOut.height（）/2））；
//现在，将缩放正方形添加到视图中。
视图。追加（缩放）；
// ---------------------------------------------- //
// ---------------------------------------------- //
//现在我们已经实际设置了UI，我们需要
//绑定事件处理程序。
//我们只想在以下情况下显示和隐藏缩放：
//用户将鼠标悬停在视图上。
view.hover(
功能（事件）{
//秀给我看。
zoom.show（）；
},
功能（事件）{
//隐藏缩放。
zoom.hide（）；
}
);
//当用户将鼠标移到视图上时，我们可以得到
//鼠标在页面上的坐标；我们需要
//能够将这些转换为基于视图的
//X和Y坐标。同样，让我们得到偏移量
//作为基准0x0坐标的视图。
//
//注意：我们在这里这样做是为了只做一次，
//而不是每次鼠标移动时。
viewOffset=view.offset（）；
//获取jQuery-ed版本的窗口
//需要在每次
//鼠标在div上移动。
//
//注意：这将更改引用
//此闭包中所有代码的“窗口”。
变量窗口=$（窗口）；
//当用户在视图中移动时，我们希望移动
//缩放与它们成直角。
view.mousemove(
功能（事件）{
//让窗口滚动到顶部；鼠标
//位置是相对于窗口的，而不是相对于
//文件。
var windowScrollTop=window.scrollTop（）；
var windowscorlleft=window.scrollLeft（）；
//将鼠标X/Y转换为本地视图
//可用于定位的坐标
//缩放框。
刚毛合成(
数学地板(
event.clientX-viewOffset.left+windowScrollLeft
),
数学地板(
event.clientY-viewOffset.top+windowscorltop
)
);
}
);
//我将缩放框放置在基于
//给定视图的本地鼠标坐标。
var setZoomPosition=函数（mouseLeft、mouseTop）{
//理想情况下，我们希望使缩放框居中
//在鼠标上。因此，我们想要给定的鼠标
//左坐标和鼠标顶部坐标位于
//缩放框的中间。
var zoomLeft=（mouseLeft-（zoom.width（）/2））；
var zoomTop=（mouseTop-（zoom.height（）/2））
//然而，当我们移动缩放框时，我们
//永远不要让它超出视野范围。
//保护左上边界。
zoomLeft=Math.max（zoomLeft，0）；
zoomTop=Math.max（zoomTop，0）；
//保护右下边界。因为
//底部和右侧需要标注尺寸
//考虑到缩放框的大小，请确保使用
//包括边框的外部宽度。
zoomLeft=Math.min(
zoomLeft，
（view.width（）-zoom.outerWidth（））
);
zoomTop=Math.min(
zoomTop，
（view.height（）-zoom.outerHeight（））
);
//将缩放框放置在视图的边界中
//图像缩放视图框。
zoom.css({
左：（zoomLeft+“px”），
顶部：（zoomTop+“px”）
});
};
//现在我们已经跟踪到鼠标的移动
//正确地说，我们需要跟踪缩放到
//按需放大图像ZoomInOut。但是，要做到这一点，
//我们需要开始用
//imageZoomInOut，以便我们可以根据需要对其进行操作。
imageZoomInOut.data({
zoomFactor:（view.width（）/zoom.width（）），
缩放：1，
排名：0，
左:0,，
宽度：imageZoomInOut.width（），
高度：imageZoomInOut.height（），
originalWidth:imageZoomInOut.width（），
原始高度：imageZoomInOut.height（）
});
//现在，让我们将click事件处理程序附加到
//缩放框。
缩放。点击(
功能（事件）{
//首先，防止默认值，因为这是
//不是纳维加
/*style.css*/

    #view {
        border: 1px solid #333333 ;
        overflow: hidden ;
        position: relative ;
        width: 400px ;
        /*giving margin left to move image to the center*/
        margin-left: 400px;
        }

        .imageZoomInOut {
        display: block ;
        left: 0px ;
        top: 0px ;
        }

        #zoom {
        background-imageZoomInOut: url( "./white_fade.png" ) ;
        border: 1px solid #000000 ;
        cursor: pointer ;
        display: none ;
        height: 200px ;
        position: absolute ;
        width: 200px ;
        z-index: 100 ;
        }

//********************   js   *******************

// When the WINDOW is ready, initialize. We are going with
    // the window load rather than the document so that we
    // know our imageZoomInOut will be ready as well (complete with
    // gettable dimentions).
    $(document).ready(function(){

    // First, let's get refernces to the elements we will
    // be using.
    var view = $( "#view" );
    var imageZoomInOut = $( ".imageZoomInOut" );

    // Create the ZOOM element - this will be added with
    // Javascript since it's more of an "effect".
    var zoom = $( "<a id='zoom'><span><br /></span></a>" );

    // Before we start messing with the scripts, let's
    // update the display to allow for the absolute
    // positioning of the imageZoomInOut and zoomer.

    // Set an explicit height / width on the view based
    // on the initial size of the imageZoomInOut.
    view.width( imageZoomInOut.width() );
    view.height( imageZoomInOut.height() );

    // Now that the view has an explicit width and height,
    // we can change the displays for positioning.
    imageZoomInOut.css( "position", "absolute" );

    // Set an exlicit height on the imageZoomInOut (to make sure
    // that some of the later calcualtions don't get
    // messed up - I saw some irradic caculated-height
    // behavior).
    imageZoomInOut.height( imageZoomInOut.height() );

    // Before we add the zoom square, we need it to match
    // the aspect ratio of the imageZoomInOut.
    zoom.width( Math.floor( imageZoomInOut.width() / 2 ) );
    zoom.height( Math.floor( imageZoomInOut.height() / 2 ) );

    // Now, add the zoom square to the view.
    view.append( zoom );


    // ---------------------------------------------- //
    // ---------------------------------------------- //


    // Now that we have our UI set up physically, we need
    // to bind the event handlers.

    // We want to show and hide the zoom only when the
    // user hovers over the view.
    view.hover(
    function( event ){
    // Show the soom.
    zoom.show();
    },
    function( event ){
    // Hide the zoom.
    zoom.hide();
    }
    );


    // As the user mouses over the view, we can get the
    // mouse coordinates in terms of the page; we need
    // to be able to translate those into VIEW-based
    // X and Y cooridates. As such, let's get the offset
    // of the view as our base 0x0 coordinate.
    //
    // NOTE: We are doing this here so that we do it once,
    // rather than every time the mouse moves.
    viewOffset = view.offset();

    // Get the jQuery-ed version of the window as we will
    // need to access it's scroll offsets every time the
    // mouse moves over the div.
    //
    // NOTE: This will change the change the refernce to
    // "window" for all of the code in this closure.
    var window = $( window );


    // As the user moves across the view, we want to move
    // the zoom square with them.
    view.mousemove(
    function( event ){
    // Get the window scroll top; the mouse
    // position is relative to the window, NOT
    // the document.
    var windowScrollTop = window.scrollTop();
    var windowScrollLeft = window.scrollLeft();

    // Translate the mouse X / Y into view-local
    // coordinates that can be used to position
    // the zoom box.
    setZoomPosition(
    Math.floor(
    event.clientX - viewOffset.left + windowScrollLeft
    ),
    Math.floor(
    event.clientY - viewOffset.top + windowScrollTop
    )
    );
    }
    );


    // I position the zoom box within the view based on
    // the given view-local mouse coordinates.
    var setZoomPosition = function( mouseLeft, mouseTop ){
    // Ideally, we want to keep the zoom box centered
    // on the mouse. As such, we want the given mouse
    // left and mouse top coordiantes to be in the
    // middle of the zoom box.
    var zoomLeft = (mouseLeft - (zoom.width() / 2));
    var zoomTop = (mouseTop - (zoom.height() / 2))

    // As we move the zoom box around, however, we
    // never want it to go out of bounds of the view.

    // Protect the top-left bounds.
    zoomLeft = Math.max( zoomLeft, 0 );
    zoomTop = Math.max( zoomTop, 0 );

    // Protect the bottom-right bounds. Because the
    // bottom and right need to take the dimensions
    // of the zoom box into account, be sure to use
    // the outer width to include the border.
    zoomLeft = Math.min(
    zoomLeft,
    (view.width() - zoom.outerWidth())
    );
    zoomTop = Math.min(
    zoomTop,
    (view.height() - zoom.outerHeight())
    );

    // Position the zoom box in the bounds of the
    // imageZoomInOut view box.
    zoom.css({
    left: (zoomLeft + "px"),
    top: (zoomTop + "px")
    });
    };


    // Now that we have the mouse movements being tracked
    // properly, we need to track the click on the zoom to
    // zoom in the imageZoomInOut on demand. To do that, however,
    // we need to start storing some information with the
    // imageZoomInOut so we can manipulate it as needed.
    imageZoomInOut.data({
    zoomFactor: (view.width() / zoom.width()),
    zoom: 1,
    top: 0,
    left: 0,
    width: imageZoomInOut.width(),
    height: imageZoomInOut.height(),
    originalWidth: imageZoomInOut.width(),
    originalHeight: imageZoomInOut.height()
    });


    // Now, let's attach the click event handler to the
    // zoom box.
    zoom.click(
    function( event ){
    // First, prevent the default since this is
    // not a navigational link.
    event.preventDefault();

    // Let's pass the position of the zoom box
    // off to the function that is responsible
    // for zooming the imageZoomInOut.
    zoomImage(
    zoom.position().left,
    zoom.position().top
    );
    }
    );


    // I take the zoom box coordinates and translate them
    // into an actual imageZoomInOut zoom based on the existing
    // zoom and offset of the imageZoomInOut.
    //
    // NOTE: We don't care about the dimensions of the
    // zoom box itself as those should have already been
    // properly translated into the zoom *factor*.
    var zoomImage = function( zoomLeft, zoomTop ){
    // Get a reference to the imageZoomInOut data object so we
    // don't need to keep retreiving it.
    var imageZoomInOutData = imageZoomInOut.data();

    // Check to see if we have reached the max zoom
    // or if the imageZoomInOut is currently animating.
    // If so, just return out.
    if (
    (imageZoomInOutData.zoom == 5) ||
    (imageZoomInOut.is( ":animated" ))
    ){

    // Zooming in beyond this is pointless (and
    // can cause the browser to mis-render the
    // imageZoomInOut).
    return;

    }

    // Scale the imageZoomInOut up based on the zoom factor.
    imageZoomInOutData.width =
    (imageZoomInOut.width() * imageZoomInOutData.zoomFactor);

    imageZoomInOutData.height =
    (imageZoomInOut.height() * imageZoomInOutData.zoomFactor);

    // Change the offset set data to re-position the
    // 0,0 coordinate back up in the top left.
    imageZoomInOutData.left =
    ((imageZoomInOutData.left - zoomLeft) * imageZoomInOutData.zoomFactor);

    imageZoomInOutData.top =
    ((imageZoomInOutData.top - zoomTop) * imageZoomInOutData.zoomFactor);

    // Increase the zoom.
    imageZoomInOutData.zoom++;

    // Animate the zoom.
    imageZoomInOut.animate(
    {
    width: imageZoomInOutData.width,
    height: imageZoomInOutData.height,
    left: imageZoomInOutData.left,
    top: imageZoomInOutData.top
    },
    500
    );
    };


    // I reset the imageZoomInOut zoom.
    var resetZoom = function(){
    // Get a reference to the imageZoomInOut data object so we
    // don't need to keep retreiving it.
    var imageZoomInOutData = imageZoomInOut.data();

    // Reset the imageZoomInOut data.
    imageZoomInOutData.zoom = 1;
    imageZoomInOutData.top = 0;
    imageZoomInOutData.left = 0;
    imageZoomInOutData.width = imageZoomInOutData.originalWidth;
    imageZoomInOutData.height = imageZoomInOutData.originalHeight;

    // Animate the zoom.
    imageZoomInOut.animate(
    {
    width: imageZoomInOutData.width,
    height: imageZoomInOutData.height,
    left: imageZoomInOutData.left,
    top: imageZoomInOutData.top
    },
    300
    );
    };

     $("button").click(function(){

         resetZoom();
         });
    // As a final step, to make sure that the imageZoomInOut can
    // be zoomed out, bind the mousedown to the document.
    $( document ).mousedown(
    function( event ){
    // Check to see if the view is in the event
    // bubble chain for the mouse down. If it is,
    // then this click was in the view or its
    // child elements.
    var closestView = $( event.target ).closest( "#view" );

    // Check to see if this mouse down was in the
    // imageZoomInOut view.
    if (!closestView.size()){

    // The view was not found in the chain.
    // This was clicked outside of the view.
    // Reset the imageZoomInOut zoom.
    resetZoom();

    }
    }
    );
    });

<!--- html --->

<div id="view">
        <img class="imageZoomInOut" height="600" width="400" src="http://imedia.tv.com.pk/tvb/galery_celebrities/medium/Fawad_afzal_khan_image_90.jpg">
    </div>

left: 400px;