1

Howdey，我需要创建一个方向感知悬停效果，但停留在正确的计算上。（这是计算问题还是错误的标记？）

这是我到目前为止所做的：

左右箭头按预期工作，但向上和向下失败。任何想法我做错了什么？

$("#circle").on('mousemove', function(e) {
    var elem = $(this),
        arrowT = $('.arrow.top'),
        arrowR = $('.arrow.right'),
        arrowB = $('.arrow.bottom'),
        arrowL = $('.arrow.left'),

        offset = elem.offset(),
        pageX = e.pageX - offset.left,
        pageY = e.pageY - offset.top,
        side = {
            top: pageY < (elem.height() / 2),
            left: pageX < (elem.width() / 2),
            bottom: pageY > (elem.height() / 2),
            right: pageX > (elem.width() / 2)
        };


    arrowT.css({
        top: side.top ? pageY - arrowT.outerHeight() : null
    });
    arrowR.css({
        right: side.right ? -(pageX - (elem.width() - arrowR.outerWidth())) : null
    });
    arrowB.css({
        bottom: side.bottom ? -(pageY - (elem.height() - arrowB.outerHeight())) : null
    });
    arrowL.css({
        left: side.left ? pageX - arrowL.outerWidth() : null
    });
});
4

3 回答 3

1

这与元素移动时身体高度的变化有关。在上面贴一个大小不变的包装纸，它们可以工作

http://jsfiddle.net/t4EME/4/

#wrap
{
    height:1000px; overflow:hidden;
    padding-top:100px;
}


<div id="wrap">
    <div id="circle">
        <a href="#" class="arrow top"></a>
        <a href="#" class="arrow right"></a>
        <a href="#" class="arrow bottom"></a>
        <a href="#" class="arrow left"></a>
    </div>
</div>​
于 2012-12-28T16:18:39.620 回答
1

我希望这有帮助。那是因为将鼠标移到它上面时元素大小会发生变化。

http://jsfiddle.net/t4EME/5/

topc = $('#circle').position().top;
widk = $('#circle').height();
$("#circle").mousemove( function(e) {
    var elem = $(this),
        arrowT = $('.arrow.top'),
        arrowR = $('.arrow.right'),
        arrowB = $('.arrow.bottom'),
        arrowL = $('.arrow.left'),

        offset = elem.offset(),
        pageX = e.pageX - offset.left,
        pageY = e.pageY - offset.top,
        side = {
            top: pageY < (elem.height() / 2),
            left: pageX < (elem.width() / 2),
            bottom: pageY > (elem.height() / 2),
            right: pageX > (elem.width() / 2)
        };   
if(e.pageY>topc && e.pageY<topc+widk) {
$('.top').css({
    top: side.top ? pageY - arrowT.outerHeight()  : null
});
$('.right').css({
    right: side.right ? -(pageX - (elem.outerWidth() - arrowR.outerWidth())) : null
});
$('.bottom').css({
    bottom: side.bottom ? -(pageY - (elem.outerHeight() - arrowB.outerHeight())) : null
});
$('.left').css({
    left: side.left ? pageX - arrowL.outerWidth() : null
});
}
});​
于 2012-12-28T16:46:32.100 回答
0

http://jsfiddle.net/t4EME/7/

这是一个带有链接的工作版本

        top: pageY < (elem.height() / 2) && pageY  > 0 ,
        left: pageX < (elem.width() / 2) && pageX  > 0,
        bottom: pageY > (elem.height() / 2)  && pageY  < elem.height(),
        right: pageX > (elem.width() / 2) && pageX  < elem.width()

更改为绝对定位，因为边距隐藏了链接

于 2012-12-28T16:36:52.887 回答