3

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

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

2 回答 2

3

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 的答案将非常有效并且需要更少的努力。

于 2013-05-09T21:37:34.007 回答
0

尝试以这种方式添加10px的“边距”

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

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

我希望这对你有意义

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

于 2013-05-09T20:58:44.773 回答