Question

我正在创建自己的缩放功能。我将图像换成x2尺寸的图像，该图像应该可以在点击时移动。虽然运动给我带来了麻烦。我拼凑了一些来自网络的代码。它工作但不仅左右移动。我希望它用鼠标移动，图像以鼠标为中心，并且还限制了包围它的元素的尺寸。有人有什么想法？链接：http://bigideaadv.com/pic_site/?p=95

    jQuery("div.zoom2 img.rsImg2").mousemove(function(e) {
        var zoom = jQuery(this);
        var position = zoom.position();

        //console.log(position);

        jQuery(".rsImg2").css({"left" : position.left, "top" : position.top});

        // the first parameter (e) is automatically assigned an event object

        var parentOffset = jQuery(this).parent().offset();
        //or $(this).offset(); if you really just want the current element's offset
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;

        jQuery(".rsImg2").css({"left" : relX, "top" : relY});
    });

Answer 1

在您的网站上调试很难，如果您可以创建jsFiddle，这将有所帮助。

但是，我认为问题在于您正在更改触发img事件的mousemove的位置。这会使img元素远离鼠标光标，因此除非您移回img（向右或向下），否则事件将不再触发。

相反，尝试在父

上触发事件

jQuery("div.zoom2").mousemove(function(e) {

你必须修改一些jQuery以指向正确的元素。另外，你确定你不想设置光标移动的负片吗？像这样：

jQuery(".rsImg2").css({"left" : -relX, "top" : -relY});

或类似于此的东西。玩弄它。如果你创建一个jsFiddle，我们可以帮助更好一点=）

祝你好运！

在mousemove上移动缩放图像

1 个答案: