Question

基本上，当我移动鼠标并按住鼠标左键时，我想在我的图像上创建一个放大镜效果。但它就像拖延图片一样。

当我单独使用mousemove或mousedown动作时，它可以正常工作，但我想为它添加两个动作。

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以调整行为（即使鼠标在鼠标注释后没有立即移动，它也会消失。）

$(".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。

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

如何在mousedown和mousemove时放大图像并在mouseup时释放

1 个答案: