Question

我有一个div1，可以通过jquery为鼠标的悬停方向设置背景位置。

但它运作正常。这是不正确的方向，我希望它可以在div上悬停每一只鼠标。

代码：

$(function() {
    $(".mainCont").hover(function(e) {
            // $(this).addClass("hoverOnce");
        var edge = closestEdge(e.pageX, e.pageY, $(this).width(), $(this).height());
    }, function(){
           $(this).removeClass('top right bottom left');
         // $(this).removeClass("hoverOnce"); 
    });
});

function closestEdge(x,y,w,h) {
        var topEdgeDist = distMetric(x,y,w/2,0);
        var bottomEdgeDist = distMetric(x,y,w/2,h);
        var leftEdgeDist = distMetric(x,y,0,h/2);
        var rightEdgeDist = distMetric(x,y,w,h/2);
        var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
        switch (min) {
            case leftEdgeDist:
                $(".hoverOnce").addClass("left");
            case rightEdgeDist:
                $(".hoverOnce").addClass("right");
            case topEdgeDist:
                $(".hoverOnce").addClass("top");
            case bottomEdgeDist:
                $(".hoverOnce").addClass("bottom");
        }
}

function distMetric(x,y,x2,y2) {
    var xDiff = x - x2;
    var yDiff = y - y2;
    return (xDiff * xDiff) + (yDiff * yDiff);
}

Answer 1

您在后台使用的此图片的尺寸为700x500：

http://thesis2010.micadesign.org/kropp/images/research/bird_icon.png

我认为如果您将这些设置添加到.mainCont，这样可以获得所需的结果：

width: 700px; 
height: 500px;
position: absolute;

例如：

.mainCont {
    width: 700px;
    height: 500px;
    background: url(http://thesis2010.micadesign.org/kropp/images/research/bird_icon.png) no-repeat center center;
    transition: all 0.5s ease-in-out;
    margin: 100px auto;
    position: absolute;
}

Fiddle

Answer 2

最后，它得到了解决。

<强> find fiddle demo

$('.mainCont').hover(function(e){
        var dir = determineDirection($(this), {x: e.pageX, y: e.pageY});
        $(this).addClass('direction_'+dir);
    }, function() {
        $(this).removeClass('direction_3 direction_1 direction_2 direction_0');
    });

function determineDirection($el, pos){
    var w = $el.width(),
        h = $el.height(),
        x = (pos.x - $el.offset().left - (w/2)) * (w > h ? (h/w) : 1),
        y = (pos.y - $el.offset().top  - (h/2)) * (h > w ? (w/h) : 1);

    return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180)) / 90 + 3) % 4;
}

在悬停的背景位置动画

2 个答案: