0
  • 画像のような HTML 要素が現在のビューポートで表示可能かどうか、またはスクロールで表示されるかどうかを知ることは可能ですか?
    • 完全または部分的に表示可能な場合、表示されている部分の量を取得するにはどうすればよいですか?

次の画像から説明しようとしています。 ここに画像の説明を入力

下部の 2 つの画像はビューポート内で部分的に表示されており、少し下にスクロールすると完全に表示されます。

今、私は上記の情報を取得したいと考えています。

実際のシナリオでは、Google 画像検索のように、アルバム内の画像のホバー時にポップアップ ズーム効果を取得しようとしています。画像が説明されている方法で配置され、ズームされた div も半分に表示されている場合を除いて、すべて問題ありません。

画像が完全にビューポート内にある通常の状態: ここに画像の説明を入力

そして部分的にビューポートで： ここに画像の説明を入力

本当にありがとうございました。

コード：

var albumDetailOnReady = function() {  

    $('.image').each(function(){
        var photo = $(this);
        var wrap = $(findParentByClassName(document.getElementById(photo.attr('id')), 'wrap'));
        var row = $(findParentByClassName(document.getElementById(wrap.attr('id')), 'albumDetailRow'));
        var visibleZone = $(wrap).find('.alDtlColumn');
        var pictureBlock = $(visibleZone).find('.pictuteBlock');        
        var hiddenZone = $(wrap).find('.hiddenZone');        

        $(photo).load(function(){
            if(177 > $(photo).width()){
                var imgleft = ($(pictureBlock).width() - $(photo).width())/2 + 'px';
                $(photo).css({'left': imgleft});
            }
        });

        $(photo).hover(function(){                         
            var y;            
            if($(photo).height() > $(photo).width()) {
                y = ($(visibleZone).offset().top - 50) + 'px';               
            } else {
                y = ($(visibleZone).offset().top + 50) + 'px';
            }         

            var x;
            if($(row).find('.wrap:first').attr('id') === $(wrap).attr('id')) {
                x = ($(visibleZone).offset().left - 10) + 'px';
            } else if($(row).find('.wrap:last').attr('id') === $(wrap).attr('id')) {
                x = ($(visibleZone).offset().left - 50) + 'px';
            } else {
                x = ($(visibleZone).offset().left - 20) + 'px';
            }

            $(hiddenZone).css({
                'top': y,
                'left': x,                
                'position': 'absolute',
                'z-index': '10'
            });          

            $(hiddenZone).fadeIn('fast');
        }, function(){

        });

        $(hiddenZone).hover(function(){},function(){
            $(hiddenZone).hide().stop(true, true);
        });
    });   
}

var findParentByClassName = function(element, clazz) {
    while (element.parentNode) {
        element = element.parentNode;
        if (hasClass(element, clazz)) {
            return element;
        }
    }
    return null;
}

function hasClass(element, cls) {
    var regex = new RegExp('\\b' + cls + '\\b');
    return regex.test(element.className);
}

HTML がないため表示できません。ADF フレームワークで作業しています。

しかし、説明のために：

画像ごとに、表示と非表示の 2 つのゾーンがあります。どちらもラップに包まれています。画像にカーソルを合わせると、非表示の div が表示されます。非表示の div の上部と左は、何らかの条件付きで表示されている div の上部と左によって測定されます。

4

1 に答える 1

0

jQuery.Viewport

要素を絶対位置で表示するための便利なビューポートとして要素を作成する、非常に便利で軽量な jQuery プラグイン。プラグインは GitHub でホストされています。あなたはそれが実際に動いているのを見ることができます：

https://github.com/borbit/jquery.viewport

于 2012-06-05T09:32:32.383 に答える