0

我正在做一个网站，我想在此之前制作一个正在建设的屏幕。在这个屏幕上有两个 div（#logo 和 #contact）。我想在加载屏幕之前将这些 div 定位到屏幕的中间。有HTML：

     $(document).ready(function(){
            $(window).resize(function(){
                $("#logo").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#logo").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#logo").outerHeight())/2
                });
                $("#contact").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#contact").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#contact").outerHeight())/2
                }); 
            });
            $(window).resize();
        });
    </script>
    </head>
<body>
    <div id="logo">
        <script>
            $("#logo").load(function(){
                $("#logo").css({
                    position:'absolute',
                    left: ($(window).innerWidth() - $("#logo").outerWidth())/2,
                    top: ($(window).innerHeight() - $("#logo").outerHeight())/2
                });
            });
        </script>
        <a href="#">
            <img id="logoimg"  src="img/logo.png" title="UNDER CONSTRUCTION" alt="site logo"/>
        </a>
    </div>
    <div id="contact">
        <p>Address: blabla<br>blabla</p>
        <p>Phone: 00000000000</p>
        <p>E-mail: <a href="mailto:contact@info.com">contact@info.com</a></p>
    </div>
    <script>
        $("#logo").mouseenter(function(){
            $("#logo").fadeTo("fast", 1);
        })
        $("#logo").mouseleave(function(){
            $("#logo").fadeTo("fast",0.33);
        })
        $("#logo").click(function (){
            $("#logo").fadeOut("fast");
            $("#contact").fadeIn("slow");
        })
        $("#contact").click(function(){
            $("#contact").fadeOut(300);
            $("#logo").fadeIn(500);
        })
    </script>
</body>
</html>

一切都很好，但标志 div 不在中间，只是水平，另一个很好。为什么？你有什么推荐？

哦，还有.css

html{
background:url(img/sixtkep1.jpg) no-repeat bottom center;
background-size:cover;
overflow:hidden;
min-height:100%;
font-family:'Amatic SC' cursive;
}
body{
height:100%;
}
#logo{
position:absolute;
width:20%;
border:1px dotted;
border-color:#FFF;
padding:0 0 0 0;
}
#logo img{
width:100%;
margin:0 0 0 0;
border:0 0 0 0;
}
#contact{
padding:20px;
display:none;
width:20%;
overflow:inherit;
position:absolute;
text-align:center;

谢谢！

4

3 回答 3

0

我有解决办法！我没有在css中设置top和left参数。就在 jQuery 中。

#logo{
position:absolute;
width:20%;
margin: 0 0 0 0;
padding:0 0 0 0;
}
#logo img{
width:100%;
margin:0 0 0 0;
border:0 0 0 0;
}
#contact{
display:none;
width:30%;
min-width:320px;
max-width:360px;
overflow:inherit;
position:absolute;

有两个具有相对大小的 div。没有像素！！！

还有脚本：

$(document).ready(function(){
        $(window).load(function(){
            $(window).resize(function(){
                $("#logo").css({
                    opacity:0.33,
                    top:($(window).innerHeight()*0.5)-($("#logoimg").height()/2),
                    left:($(window).innerWidth()*0.5)-($("#logoimg").width()/2),
                });
                $("#contact").css({
                    top:($(window).innerHeight()*0.5)-($("#contact").height()/2),
                    left:($(window).innerWidth()*0.5)-($("#contact").width()/2),
                }); 
            });
            $(window).resize();
        });
    });

它适用于每种窗口大小和每种浏览器。相对的 div 每次都在中间！:)

于 2013-06-11T09:34:35.943 回答
0

Mb 你应该尝试使用$(window).load(function() {而不是$(document).ready(function(){

于 2013-06-07T20:42:45.973 回答
0

对于left（和初始top声明），您可以使用 CSS 轻松完成：

#logo,#contact {
    position:absolute;
    top:50%;
    left:40%;
    width:20%;
    ...
}

left分配给剩余的 80% 除以 2。top分配给50%这样您就可以只申请marginTop负数来抵消它：

$("#logo,#contact").css({
    marginTop:(-1*($(this).height()/2))
});

请注意，我将声明组合成一个选择器（因为 CSS 相同），并使用一半的高度来形成边距。这将把它从top:50%CSS 中提高一半的高度，使其垂直居中。

另一个选项是为#logoand设置一个固定的高度#contact，这样你就可以在没有 JS 解决方案的情况下在 CSS 中声明负边距：

#logo,#contact {
    position:absolute;
    top:50%;
    left:40%;
    width:20%;
    height:400px;
    margin-top:-200px;
    ...
}

这是首选，但仅在应用固定高度时才有效。我px在这里使用过，但您也可以轻松使用%.

于 2013-06-07T20:45:15.827 回答