Question

<div class="moveAble" style="position: absolute;">
<div class="info"><img src="https://pbs.twimg.com/profile_images/1498221863/Jodis_Gifts_logo_hi_res_normal.jpg" alt="info" /></div>
</div>

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

      });
    });

上面的代码无法正常工作，因为我移动鼠标指针只能向下和向右移动，而不是向上和向左移动。和div运动也不顺畅。我该如何解决这个问题才能使它发挥作用。

DEMO here

Answer 1

我想这就是你想要的效果http://jsfiddle.net/wUAGP/440/

$(document).ready(function(){
  var $moveable = $('.moveAble');
  $(document).mousemove(function(e){
      $moveable.css({'top': e.pageY,'left': e.pageX});
  });
});

感谢@nnnnnn提及$moveable

的缓存

Answer 2

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

看看$('.moveAble').css('top', y-20).css('left', x-20);

你的鼠标只是边框，所以你需要移动它。

小提琴：http://jsfiddle.net/wUAGP/436/

如何在悬停时用鼠标指针移动div？

2 个答案: