2

次のようなものがあるとします。

<a href="/ad.php?go=123">
    <div class="ad"></div>
</a>

<div>の高さが 50、幅が 250、背景が一般的なバナーであるとします。

私がやりたいのは、それを置き換えることではなく (これはオリジナルを消去することを意味します)、むしろ (私が想定する) 絶対配置のコピーを作成することですz-index。

これは、実際の広告をオフにするのではなく、白でオーバーレイすることを除いて、adblock が行うことと考えてください。

このようなことを行う最善の方法は何ですか?

ありがとう。

4

3 に答える 3

2

アンカーを選択して設定するだけvisibility:hiddenです。要素は残り、レイアウトは同じままですが、広告は表示されません。

$('a').css('visibility', 'hidden'); // replace 'a' with the appropriate selector for your ads, of course

それを難し​​い方法で行う

.width()とを使用して、選択した要素の寸法を取得し.height()ます。新しい要素を作成し、 を使用して高さ、幅、および zindex を設定し.css()ます。悪いのは位置決めです。.offset()通常、上と左を取得するために使用するだけで回避できます。時にはそれはよりトリッキーです。jQuery UI position pluginをお勧めします。さらに、ブラウザ ウィンドウのサイズを変更すると、位置がずれます。$(window).resize()すべてのオーバーレイを処理して再配置する必要があります。ちらつきます、がらくたのように見えます...それがあなたがただ使うべき理由ですvisibility:hidden. しかし、自分に合わせてください。

しかし、最低限:

var $a = $('.ad');


$a.each(function() {
    var $this = $(this);
    $this.before($('<div></div>')
         .addClass('ad-overlay')
         .css({
            height: $this.height(),
            width: $this.width(),
            'z-index': 1000,
            'background-color': 'white',
            position: 'absolute',
            top: $this.offset().top,
            left: $this.offset().left
        }));
});

これがフィドルです。http://jsfiddle.net/HackedByChinese/SF4tw/4/

于 2012-06-09T02:23:49.403 に答える
2

まず、サイトの下部にある div を拡大して上部に配置する必要があります。

次に、それを拡大して上に配置します。

<script type="text/javascript">
document.getElementsByTagName('body')[0].innerHTML += "<div id=\"adblocker\" style=\"background-color:#FFF; position:absolute; z-index:999; display:block;\"></div>"
var blocker = document.getElementById('adblocker');
var ad = document.getElementById('ad');
blocker.style.top = ad.offsetTop+"px";
blocker.style.left = ad.offsetLeft+"px";
blocker.style.width = ad.offsetWidth+"px";
blocker.style.height = ad.offsetHeight+"px";
</script>

Firefox と Chrome でこれをテストしました。動作しない場合は教えてください。

于 2012-06-09T02:30:37.753 に答える
0

非表示にする要素にオーバーレイを挿入する、より一般的なオプションを使用します

var overlayElement = function (element) {
    var originalDiv = element,
        overlayDiv = document.createElement('div'),
        overlayStyle = overlayDiv.style;
    originalDiv.style.position = 'relative';
    // either:
    overlayStyle.position = 'absoluete';
    overlayStyle.top = 0;
    overlayStyle.left = 0;
    overlayStyle.width = '100%';
    overlayStyle.height = '100%';
    overlayStyle.background = 'white';
    // or pre set it with a css class and:
    overlayDiv.className = 'overlay-div';
    // finally:
    originalDiv.appendChild(overlayDiv);
    return overlayDiv; // just so you can go on working with it
}
var myOverlayElement = overlayElement(document.getElementById('divId'));
于 2012-06-26T07:11:14.847 に答える