1

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

我用了这个放大的例子

当我单独使用 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
    })
})
4

1 回答 1

1

问题如下：

1. 你在和事件leftButtonDown = true/false中走错路了。mousedownmouseup

mouseup2. 将事件转换为绑定到也是值得的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);
}

有关更多详细信息，请参阅此小提琴。

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

于 2012-09-05T07:11:22.717 回答