1

どうも、方向を意識したホバリング効果を作成する必要がありますが、正しい計算で立ち往生しています。(計算の問題か、マークアップの間違いか?)

これまでに行ったことは次のとおりです。

左右の矢印は期待どおりに機能しますが、上下は失敗します。私が間違っていることはありますか？

$("#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 に答える