0

に簡単な画像プレビューがありhoverます。

jQuery

jQuery('img').hover(
    function(){
        jQuery('body').append('<div id="image_preview"><img src="'+ jQuery(this).attr('src') +'" alt="Image preview" /></div>');
        jQuery('.camera_info img').mousemove(
            function(event){
                jQuery('#image_preview').css('top', (event.pageY - 10) + 'px').css('left', (event.pageX + 30) + 'px').fadeIn('normal');
            }
        );
    },
    function(){
        jQuery('#image_preview').remove();
    }
);

CSS:

#image_preview {
    border: 1px solid #CCCCCC;
    display: none;
    padding: 5px;
    position: absolute;
}

問題は、画像がブラウザの側面に近すぎる場合、次のように後に表示されることです。 画像

私は正しい位置でプレーしようとしましたが、うまくいきませんでした... 誰かがこの問題について私を助けてくれますか?

4

1 に答える 1

1

これは、ブラウザの表示可能領域内に要素の上部と下部を保持するために使用していたものです。私の場合、要素の左/右座標の処理について心配する必要はありませんでしたが、以下のコードを調整して処理することができましたそれも。

この関数は HTMLElement を引数として取ります。つまり、$('#someid').get(0)またはの戻り値でありdocument.getElementById('someid') 、全体で jQuery を使用します。

function moveIntoView (elem)
{
    var w$ = $(window),
      elem$ = $(elem),
      docViewTop = w$.scrollTop(),
      docViewBottom = docViewTop + w$.height(),
      elTop = elem$.offset().top,
      elBottom = elTop + elem$.height();
    //  element top is lower than top of document in view
    //  and element bottom is higher than bottom of document in view, so nothing to do
    if( ((docViewTop <= elTop) && (docViewBottom >= elBottom)))
       return;

    elem$.css("top", parseInt(elem$.css("top")) - (elBottom - docViewBottom));
}
于 2013-01-22T15:28:31.170 に答える