1

奇妙な問題が発生しました。誰かが助けてくれるかもしれません。

ページには複数の img があり、それぞれが次のように定義されています。

<td><a href="#" onclick="Show(\'div1\');return false;"><img src="img1" onmouseout="Hide(\'div1\');"></a></td>

ユーザーが画像をクリックすると、非表示の div がページの中央に表示され、マウスアウトで消えます。これは非表示の div です:

<div id="div1" style="width:400px;height:220px;padding:8px;position:absolute;display:none;border:6px solid #CC6600;background-color:#FFDAB4">

上下にスクロールし始めるまで、すべてが正常に機能します。いくつかの特定の位置とスクロールの最後に、非表示の div が表示されません。誰かが理由を理解していますか?

ここにJavaScriptがあります:

function Show (div)
{
    var winW=630,winH=460,t,l;

    if (document.body && document.body.offsetWidth) {
        winW = document.body.offsetWidth;
        winH = document.body.offsetHeight;
    }

    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
        winW = document.documentElement.offsetWidth;
        winH = document.documentElement.offsetHeight;
    }

    if (window.innerWidth && window.innerHeight) {
        winW = window.innerWidth;
        winH = window.innerHeight;
    }

    var scrollTop  = window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop;
    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;

    t=winH/2-240/2+scrollTop;
    l=winW/2-400/2+scrollLeft;

    document.getElementById(div).style.top=t+"px";
    document.getElementById(div).style.left=l+"px";
    document.getElementById(div).style.display="block";
}

function Hide(div)
{
    document.getElementById(div).style.display="none";
}

scrollTopの問題ではないことに気付きました。div 内のアンカーは、div 全体を占めるのではなく、下部のみを占めます。img全体でカーソルが変化するのは奇妙です。onclickはimg全体で呼び出されますが、非表示のdivは下部をクリックしたときにのみ表示されます。style="display:block" を試しましたが成功しませんでした。必死になって、私は style="opacity:0.9" を入れましたが、うまくいきました! 唯一の問題は、非表示の div が img の背後に表示されることです (z-index が img よりも低いなど)。非表示の div は position:absolute であるため、z-index は使用していません。 *まだまだ頭のいい人募集中!!!

4

1 に答える 1

0

jQuery ソリューションを試す

$(function() {
   $('body').scrollTop(0);
});

一方、JavaScript ソリューションが必要な場合は、試してみてください

document.body.scrollTop = document.documentElement.scrollTop = 0;
于 2013-08-26T10:11:09.103 に答える