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 问题。Anchor inside div不占整个div，只占下部。奇怪的是光标在整个img上发生了变化，onclick在整个img上被调用，但隐藏的div只有在点击下部时才会显示。我试过 style="display:block" 没有任何成功。出于绝望，我输入了 style="opacity:0.9" 并且它确实有效！唯一的问题是隐藏的 div 显示在 img 后面（比如 z-index 低于 img）。我没有使用 z-index，因为隐藏的 div 是位置：绝对。 *还在寻找聪明人！！！

4

1 回答 1

0

试试 jQuery 解决方案

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

同时，如果您想要 JavaScript 解决方案，请尝试

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