2

編集:私はこれで解決しました:(答えてくれたみんなに感謝します)

var intDuration = 50;
setInterval(
function(){
   $('#image').animate({"margin-left": "-=0.05%", "margin-top": "-=0.05%", "width": "+=0.1%"}, 'slow');
}, 
intDuration
);

そのため、50 ミリ秒ごとに 0.1% の幅を追加する JavaScript があります。これに関する唯一の問題は、数秒後に中心がずれることです (幅を追加しているため)。javascript/cssを介してこれに対する解決策はありますか?
JavaScript は次のとおりです。

    var intDuration = 50;
    setInterval(
       function(){
           $('#image').animate({"width": "+=0.1%"},'slow');
    }, 
       intDuration
    );

これが私のCSSです：（フォーマットがひどく、または多くのものが冗長である場合は申し訳ありません）

.image {
text-align: center;
vertical-align: middle;
background: #000;
}

.image img {
width: 1%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -20px;
}

ここに私のHTMLがあります：

    <div class="image">
 <image src="image.png" id='image'/>


JSFiddler: http://jsfiddle.net/Zane_/eERUA/

4

4 に答える 4

0

を削除するだけposition:fixedで、text-align: center;中心になります。

.image {
text-align: center;
vertical-align: middle;
background: #000;
}

.image img {
width: 1%;
}

または、display:blockとmargin-left:autoを使用します。margin-right:auto

.image {
    vertical-align: middle;
    background: #000;
    }

.image img {
width: 1%;
display:block;
margin-left:auto;
margin-right:auto;
}
于 2013-08-04T12:11:17.673 に答える
0

これを試して

http://jsfiddle.net/4GrQk/2/

    .image img {
    width: 1%;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -0.5%;
    } 

    var intDuration = 50;
setInterval(

function () {
    var w = $('#image').width();
    var m = w/2;
    $('#image').animate({
        "width": "+=5%",
        "margin-left": -m+"%"
    }, 'slow');
},
intDuration);
于 2013-08-04T12:12:11.810 に答える
0

JS と HTML ファイルは正しく表示されます。このアプローチを使用して CSS ファイルを変更してみてください。 

  .image
    {
    text-align: center;
    vertical-align: middle;
    background: #000;
    }

以下では、margin: auto; を設定する必要があります。画像が自動的に中央に配置されます。

   .image img
   {
        width: 1%;
        position: fixed;
        margin: auto;
   }

これを試してください、それはあなたの問題を解決するかもしれません

于 2013-08-04T12:12:59.020 に答える
0

margin: 0 auto;またはそれに似たものを試してください#image。

また、jsbin または jsfiddle で問題を再現し、私たちと共有することも検討してください。これにより、お客様の問題をより正確に理解し、解決策を見つけやすくなります。

于 2013-08-04T12:13:07.370 に答える