在mousemove上移动缩放图像

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

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}); 
    });

来源

2013-12-16 Dave Rottino

很难调试这在您的网站，这将有助于如果你能创造这个jsFiddle。

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

相反，尝试父触发事件

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

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

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

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

祝你好运！

来源

2013-12-16 19:46:38 lebolo

太好了。这一点帮了我一大堆。我使用鼠标移动的主div.zoom2容器，并将父级偏移量加倍，以使图像绑定到光标的中间位置。 var relX = e.pageX - parentOffset.left * 2; var relY = e.pageY - parentOffset.top * 2; 再次感谢您的帮助。 –

没问题，随时接受这个答案= P – lebolo

在mousemove上移动缩放图像

回答

相关问题