0

このコードは jsfiddle で完全に実行されていますが、dreamweaver でコーディングして Chrome (および他のブラウザー) でプレビューすると、ロード時に中央の div (テストを含む 3 つの画像) が垂直方向に集中化されません。ブラウザウィンドウを拡大縮小した場合にのみ、期待どおりに適切に中央に配置されます..

誰でも助けることができますか？ありがとう！

http://jsfiddle.net/nampham/v6HLT/

HTML

<!--menu-->
<a href="#" id="logo"><b>bitchism<br>.</b></a>
<a href="#" id="projects"><b>projects<br>.</b></a>
<a href="#" id="writings"><b>writings<br>.</b></a>
<a href="#" id="contact"><b>.<br>contact</b></a>
<!--menu-->

<div id="first">
<img src="image/circle.gif" style="width:30%;display:inline-block"/> 
<img src="image/cloud3.gif" style="width:30%;display:inline-block"/> 
<img src="image/circle2.gif" style="width:30%;display:inline-block"/>
<br />Testing
</div>

脚本

$(document).ready(function(){

$(window).resize(function(){


    $('#projects').css({
        position:'fixed',
        top: ($(window).height() - $('#projects').outerHeight())/2
    });

    $('#writings').css({
        position:'fixed',
        top: ($(window).height() - $('#writings').outerHeight())/2
    }); 

    $('#logo').css({
        position:'fixed',
        left: ($(window).width() - $('#logo').outerWidth())/2
    });

    $('#contact').css({
        position:'fixed',
        left: ($(window).width() - $('#contact').outerWidth())/2
    });

    $('#first').css({
        position:'fixed',
        top: ($(window).height() - $('#first').outerHeight())/2,
        left: ($(window).width() - $('#first').outerWidth())/2
    });

});

$(window).resize();

});


body
{
background-color:#FFF;
background-image:url(image/dot.png);
background-repeat:repeat;
font-family: 'VT323', cursive;
text-align:center;  
}


a{
text-decoration:none;
color:#F00;
font-size: 20px;
}

a:hover{
text-decoration:underline;
}

a:active{
text-decoration:line-through;
color:#F00;
}


#logo
{
position:fixed;
left:50%;
top:0;
padding-top:10px;
}



#contact
{
position:fixed;
left:0;
bottom:0;
padding-bottom:10px;    
}


#projects
{
position:fixed;
left:0;
top:50%;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */"

}

#writings
{
position:fixed;
right:0;
top:50%;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg);  /*Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

#first
{
position:fixed;
top:50%;
    left:50%;
}
4

2 に答える 2

0

これを試してみてください。コードを名前付き関数に入れてから、関数を呼び出す必要があります。

例えば：

function onResize() { ... }

それから

$(document).ready(function(){
    $(onResize);
    $(window).resize(onResize);
});

また

$(document).ready(function(){
    $(window).load('resize', onResize);
    $(window).bind('resize', onResize);
});

詳細: jQuery のサイズ変更機能がページの読み込み時に機能しない

于 2013-04-04T06:23:54.723 に答える