Question

首先，图像和退出按钮不会出现在指定的位置。单击转义按钮继续并关闭div，然后再次执行该功能。令人惊讶的是，在第二次执行时，它完美地运作。有谁知道为什么第一次加载时结果会有所不同？

（火狐）



< html>
    < head>
        < style type="text/css">
            #wievbackground { 
                position: fixed;
                top: 0;
                left: 0;
                height:100%;
                width:100%;
                background-color:red;
            }
            #escapebutton {
                position:fixed;
                background-color:white;
                height:40px;
                width:40px;
            }
        < /style>
    < /head>

        <body>

            <div id="wievwrap"> </div>

            <script type="text/javascript">
                function itemview(itemurl) {
                    document.getElementById("wievwrap").innerHTML = ' <div id="wievbackground"> </div> ';
                    document.getElementById("wievbackground").innerHTML = ' <img id="theitem" style="position:fixed" src="' + itemurl + '"> ';
                    document.getElementById("wievbackground").innerHTML += '<div onclick="document.getElementById(\'wievwrap\').innerHTML=\'\';"  id="escapebutton"></div>';

                    document.getElementById("theitem").style.left = document.getElementById("theitem").parentElement.offsetWidth / 2 - document.getElementById("theitem").offsetWidth / 2 + "px";
                    document.getElementById("theitem").style.top = document.getElementById("theitem").parentElement.offsetHeight / 2 - document.getElementById("theitem").offsetHeight / 2 + "px";

                    var x = parseInt(document.getElementById("theitem").style.left) + parseInt(document.getElementById("theitem").offsetWidth - document.getElementById("escapebutton").offsetWidth / 2);

                    document.getElementById("escapebutton").style.left = x + "px";
                    document.getElementById("escapebutton").style.top = parseInt(document.getElementById("theitem").style.top) - document.getElementById("escapebutton").offsetHeight / 2 + "px";

                }
            </script>
            <div></div>
            <div onclick="itemview('smt.png')">function</div>
        </body>
    </html>

图像放置在第一次加载时不起作用

0 个答案: