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部分。这是删除图像元素，一旦删除元素，就会调用悬停的鼠标悬停部分，并重新创建图像以及对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

尝试以这种方式添加10px的“保证金”

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

问题是，如果你用鼠标右下角，你的鼠标会继续运行.oglas_slika_velika并触发.oglas_slika（所以删除功能）

我希望它对你有意义

jsFiddle这里：http://jsfiddle.net/bzGTQ/

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

2 个答案: