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

Jquery 1.9.1 - move created element based on cursor position when hovering

本文关键字：位置 移动 创建 元素 光标 悬停      更新时间：2023-09-26

我需要移动正在创建的图像，当我悬停在拇指，而移动鼠标在拇指。我该怎么做呢?我有这样的函数(它正在工作):

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

jsFiddle Demo

闪烁是元素创建的结果，导致hover的mouseout部分被调用。这是在删除image元素，一旦元素被删除，将调用hover的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的答案会很好地工作，并且不需要太多的努力。

尝试用这种方式添加10px的"margin" 

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

问题是，如果你用鼠标移到右下角，你的鼠标在。oglas_slika_velika上，它触发了。oglas_slika(因此删除函数)

我希望这对你有意义

jsFiddle here: http://jsfiddle.net/bzGTQ/

相关文章：