Question

我想用里面的图像创建div元素，并用鼠标位置的坐标改变它的位置。有一些用于创建3D效果的jquery-pluings，但我只需要在X和Y坐标上移动。另外，在div元素的限制中这样做。

我有下一个代码：

$('div.images').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('div.images').css({'top': x,'left': y}); 
    });

在CSS div.images中有绝对位置。当我移动鼠标时不改变位置，但是当我删除CSS中的位置时，它会对元素的样式应用更改，但不会改变位置。

给我一些建议我需要做什么。

在Flash上实现的http://fieroanimals.com/，但我希望在JQuery上实现。

Answer 1

我知道这是一个老问题。但这个答案可以用于新用户。答案100％有效。

$(document).ready(function(){
      $('div.moveAble-container').mousemove(function(e){
            var y = e.pageY;
            var x = e.pageX;                    
            $('div.moveAble').css({'top': y}); 
            $('div.moveAble').css({'left': x});

      });
    });

Answer 2

$('div.images').mousemove(...)意味着它只会检测div.images之上的鼠标移动。

$('html')将检测整个页面上的鼠标移动。

jsFiddle Example

根据您的需要，您可能需要将X坐标应用于CSS left属性，将Y坐标应用于CSS top。（你在问题中反过来了。）

如何使用鼠标位置创建移动元素，如http://fieroanimals.com/？

2 个答案: