javascript - 图像放大/缩小在定位图像时无法正常工作

Question

我有以下用于图像放大/缩小的代码。问题是当我尝试根据需要定位图像时，即我将左边距应用到图像或图像容器，即#view it effects image zoom (in/out) – 在图像缩放图像开始向左移动时(由于边距)正如您在下面的 fiddle 链接中看到的那样。删除剩余边距使它再次运行良好。我想把它放在我想要的地方而不影响缩放。如果我不清楚，请告诉我。

jsfiddle

/*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>

Answer 1

尝试将padding改为

left: 400px;

告诉我这是否适合你

EXAMPLE