如何放大圖像，同時mousedown和鼠標移動並釋放mouseup

Question

基本上，我想在我的圖像上創建放大鏡效果，同時我移動鼠標並按住鼠標左鍵。但它的行爲就像是在拖拉畫面。

我用這個magnifying example

它完美，當我獨自一人使用鼠標移動或鼠標按下動作，但我想這兩個動作添加到它。

HTML：

<div class="magnify"> 
    <div class="large"></div> 
    <img class="small" title="Halten Sie die linke Maustaste-Taste für einen genaueren Blick!" src="../../Content/pictures/mypicture.png" alt="mypicture.png" /> 
</div> 

CSS：

/* Some CSS */ 
.magnify { position:relative; } 
/* Lets create the magnifying glass */ 
.large { width:200px; height:200px; position:absolute; border-radius:100%; 
/* Multiple box shadows to achieve the glass effect */ 
/* rgba(160, 195, 219, 0.85) = #a0c3db, rgba(73, 151, 205, 0.85) = #4997cd */ 
/* rgba(234, 243, 250, 0.85) = #eaf3fa, rgba(57, 136, 191, 0.85) = #3988bf */ 
box-shadow:0 0 0 9px rgba(73, 151, 205, 0.75), 
      0 0 7px 9px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25); 
/* Lets load up the large image first */ 
background:url(/Content/pictures/mypicture.png) no-repeat; 
/* hide the glass by default */ 
display:none; cursor:pointer; 
} 
/* To solve overlap bug at the edges during magnification */ 
.small { display:block; width:800px; border-radius:20px 20px 20px 20px; } 

的jquery：

var leftButtonDown = false; 
$(document).ready(function() 
{ //define zero 
    var native_width = 0; 
    var native_height = 0; 
    //Now the mousemove function 
    $(".magnify").mousemove(function (e) 
    { 
     $(".magnify").bind('mousedown', function (en) 
     { 
      if (en.which === 1) { leftButtonDown = false; } 
     }).bind('mouseup', function (en) 
     { 
      if (en.which === 1) { leftButtonDown = true; } 
     }) 

     if (leftButtonDown == true) { 
      //When the user hovers on the image, the script will first calculate 
      //the native dimensions if they don't exist. Only after the native dimensions 
      //are available, the script will show the zoomed version. 
      if (!native_width && !native_height) { 
       //This will create a new image object with the same image as that in .small 
       //We cannot directly get the dimensions from .small because of the 
       //width specified to 200px in the html. To get the actual dimensions we have 
       //created this image object. 
       var image_object = new Image(); 
       image_object.src = $(".small").attr("src"); 
       //This code is wrapped in the .load function which is important. 
       //width and height of the object would return 0 if accessed before 
       //the image gets loaded. 
       native_width = image_object.width; 
       native_height = image_object.height; 
      } else { 
       //x/y coordinates of the mouse 
       //This is the position of .magnify with respect to the document. 
       var magnify_offset = $(this).offset(); 
       //We will deduct the positions of .magnify from the mouse positions with 
       //respect to the document to get the mouse positions with respect to the 
       //container(.magnify) 
       var mx = e.pageX - magnify_offset.left; 
       var my = e.pageY - magnify_offset.top; 
       //Finally the code to fade out the glass if the mouse is outside the container 
       if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { 
        $(".large").fadeIn(100); 
       } else { 
        $(".large").fadeOut(100); 
       } 
       if ($(".large").is(":visible")) { 
        //The background position of .large will be changed according to the position 
        //of the mouse over the .small image. So we will get the ratio of the pixel 
        //under the mouse pointer with respect to the image and use that to position the 
        //large image inside the magnifying glass 
        var rx = Math.round(mx/$(".small").width() * native_width - $(".large").width()/2) * -1; 
        var ry = Math.round(my/$(".small").height() * native_height - $(".large").height()/2) * -1; 
        var bgp = rx + "px " + ry + "px"; 
        //Time to move the magnifying glass with the mouse 
        var px = mx - $(".large").width()/2; 
        var py = my - $(".large").height()/2; 
        //Now the glass moves with the mouse 
        //The logic is to deduct half of the glass's width and height from the 
        //mouse coordinates to place it with its center at the mouse coordinates 
        //If you hover on the image now, you should see the magnifying glass in action 
        $(".large").css({ left: px, top: py, backgroundPosition: bgp }); 
       } 
      } 
     } //endif leftButtonDown == true 
    }) 
}) 

Answer 1

的問題的方法如下：

1.您的leftButtonDown = true/false在mousedown和mouseup事件中發生錯誤。

2。也值得到mouseup事件轉換成綁定到document（以防我們有mousedown圖像內，並且mouseup圖像之外）。

3.添加en.preventDefault到mousedown阻止它導致Firefox或一些瀏覽器試圖拖動圖像來代替。

** 4。將fadeOut添加到mouseup以調整行爲（即使鼠標在mouseup之後不立即移動，它也會消失）。

$(".magnify").bind('mousedown', function (en) 
{ 
    if (en.which === 1) { 
     leftButtonDown = true; 
     en.preventDefault(); 
    } 
}) 
$(document).bind('mouseup', function (en) 
{ 
    if (en.which === 1) { 
     leftButtonDown = false; 
     $(".large").fadeOut(100); 
    } 
}) 

5.移動的代碼的mousemove事件處理程序的外部的上述嵌段。你只需要運行一次該代碼。因此，請將其放在$(document).ready之內。

6.您的if (leftButtonDown) { ... }後衛需要移動。將其移除並將條件檢查轉入您的fadeIn和fadeOut條件。

注意條件結束時的&& leftButtonDown。

if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0 
    && leftButtonDown) 
{ 
    $(".large").fadeIn(100); 
} else { 
    $(".large").fadeOut(100); 
} 

有關詳細信息，請參閱本fiddle。

---

我假設你還沒有嘗試添加代碼來放大放大鏡中的圖像。我會讓你完成。