Jquery 1.9.1 - 在悬停时根据光标位置移动创建的元素

Question

我需要移动当鼠标移动到拇指上时将鼠标悬停在该拇指上的图像。我怎样才能做到这一点？ 我有这样的功能（它的工作）：

var body = $('body'), 
slike = $('.oglas_slika'); 


function image_hover(url){ 
    var image = '<img class="oglas_slika_velika" src="' + url +'">'; 
    return image; 
} 

slike.hover(
    function(e){ 
     body.append(image_hover($(this).data('url'))); 
     $(".oglas_slika_velika") 
      .css("top", (e.pageY) + "px") 
      .css("left", (e.pageX) + "px") 
      .fadeIn("slow"); 
    }, 
    function(){ 
     body.find('.oglas_slika_velika').remove(); 
    } 
); 

我想这一个，但我正在闪烁（图像出现在随机的地方在页面上同时移动鼠标）：

var body = $('body'), 
slike = $('.oglas_slika'); 

function image_hover(url){ 
    var image = '<img class="oglas_slika_velika" src="' + url +'">'; 
    return image; 
} 

slike.hover(
    function(){ 
     body.append(image_hover($(this).data('url'))); 
     $(this).on('mousemove', function(e){ 
      $(".oglas_slika_velika") 
      .css("top", (e.pageY) + "px") 
      .css("left", (e.pageX) + "px") 
      .fadeIn("slow"); 
      return false; 
     }); 
    }, 
    function(){ 
     body.find('.oglas_slika_velika').remove(); 
    } 
); 

Answer 1

jsFiddle Demo

的闪烁是创建的元素的结果导致悬停的mouseout部分被调用。这是删除图像元素，并且一旦元素被删除，悬停的mouseover部分被调用，并且图像被重新创建，同时调用fadeIn。该过程中动画队列过载并最终抛出错误（Uncaught RangeError: Maximum call stack size exceeded），这将导致极其不一致的结果。

的解决这个问题，你应该跟踪其中的鼠标悬停区域是与对象：

var sp = {}; 
sp.top = slike.position().top; 
sp.left = slike.position().left; 
sp.right = sp.left + slike.width(); 
sp.bottom = sp.top + slike.height(); 

，并跟踪图像尺寸：

var w; 
var h; 

它可以一次加满追加

body.append(image_hover()); 
w = $(".oglas_slika_velika").width(); 
h = $(".oglas_slika_velika").height(); 

接下来将确保鼠标光标真正摆脱通过检查所创建的图像和光标

if(e.pageY + h > sp.bottom || e.pageY - h < sp.top){ 
body.find('.oglas_slika_velika').remove(); 
}else{ 
if(e.pageX + w > sp.right || e.pageX - w < sp.left){ 
    body.find('.oglas_slika_velika').remove(); 
} 
} 

之间的碰撞。虽然这需要稍微更多的工作悬停区域，它也有很多更精确和更不易出错。它将允许图像直接跟踪鼠标而不是推到偏移量。

如果将图像直接放置在鼠标的位置并不重要，那么@Luigi De Rosa的回答将很好地工作，并且需要较少的工作量。

Answer 2

尝试以这种方式

.css("top", (e.pageY)+10 + "px") 
.css("left", (e.pageX)+10 + "px") 

的问题是，如果你用鼠标右下方走，你的鼠标继续.oglas_slika_velika，它引发了.oglas_添加“保证金”的10px的SLIKA（所以删除功能）

我希望，它使你

的jsfiddle这里的感觉：http://jsfiddle.net/bzGTQ/