この状況を完全に中心にしてこの画像をどのように開始できますか？

イメージを正確な中心から左上の特定の位置にアニメーション化しています。これを行うには、私は絶対配置を使用する必要があります。しかし、以下の状況では、それは中央に始まらない。これに対する解決策はポジションの相対的なものになりますが、アニメーションは機能しません。 が35％のように表示されている場合は、これはMY画面の中央にのみ表示されます。この問題を解決するにはどうすればよいですか？この状況を完全に中心にしてこの画像をどのように開始できますか？

<style> 
#Intro { 
position: relative; 
height:100%; 
width:100%; 
text-align:center; 
} 

#Picture { 
position: absolute; 
top: 30%; 
} 
</style> 

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(window).ready(function() { 
    var pos = $('#Picture').position(); 
    $('#Picture').css({ 
     top: pos.top + 'px', 
     left: pos.left + 'px' 
    }).fadeIn(1000).delay(1500).animate({ 
     'top': '25px', 
     'left': '20px', 
     'height': '101px' 
    }, 2000, 'swing'); 
}); 
</script> 

<META HTTP-EQUIV=Refresh CONTENT="4.5; URL=home.html"> 
    <link href="main.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="Intro"> 
<img src="images/Triplid Logo.png" id="Picture"/> 
</div>

出典

2011-11-11 Matt

これは私のために動作します。 http://jsfiddle.net/UqMPC/ –

それは奇妙です...それは何が起こるかではありません。私にとっては、上から30％から始まり、左の余白は画像の中心ではなく中心にあります。 – Matt

http://jsfiddle.net/UqMPC/1/ご覧のとおり、画像はセンターの右側に始まります – Matt

あなたは画像を左上に縮小、その後、ウィンドウの絶対的な中心にフェードイン、最初は非表示にする場合は、次のことを行います。

イメージの初期位置を設定する簡単な式と、最初にイメージを非表示にするdisplay: none;の使用に注意してください。

CSS：

#Intro { 
    position: relative; 
    height:100%; 
    width:100%; 
    text-align:center; 
} 

#Picture { 
    position: absolute; 
    display: none; 
}

Javascriptを：

$(window).ready(function() { 
    var $img = $('#Picture'); 
    $img.css({ 
     left: ($(window).width() - $img.width())/2, 
     top: ($(window).height() - $img.height())/2 
    }).fadeIn(1000).delay(1500).animate({ 
     'top': '25px', 
     'left': '20px', 
     'height': '101px' 
    }, 2000, 'swing'); 
});

jsFiddle証明：http://jsfiddle.net/greglockwood/67Z6K/1/

出典

2011-11-11 05:07:04 GregL

ありがとうございます！それを少し上げる方法はありますか？ – Matt

私はちょうど$ img.height（））/ 2.5にしました。うまくいきました。 – Matt

おそらく、あなたが「それを上げる」という意味で少し拡大することはできますか？ – GregL

この状況を完全に中心にしてこの画像をどのように開始できますか？

答えて

関連する問題