如何放大图像，同时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。

---

我假设你还没有尝试添加代码来放大放大镜中的图像。我会让你完成。