1

ここに問題があります。CSS3 transform:translate(x, y) を使用して、画面の左側から右側にオブジェクトを遷移させています。(x 軸) 問題は画面の解像度によって異なります。これらのオブジェクトは画面から飛び出しています。私が見つけたものによると、パーセンテージを使用して座標を定義できますが、それらを使用すると、ピクセル測定を使用した場合と同じように動作するようです。これは css3 を使用してのみ可能ですか、それともメディア クエリの Javascript でこれを実装する必要がありますか?

ps、1400% を 1400px として扱っているので、em でも試してみました。

$(window).load(function() {


     $('#second').css({
         webkitTransform : 'translate(1400%,0)',
     mozTransform : 'translate(1400%, 0)',
     msTransform : 'translate(1400%, 0)',
     oTransform : 'translate(1400%, 0)',
     transform : 'translate(1400%, 0)',
     transition: 'all 1.25s ease-in-out'


     });


$('#first').css({
         webkitTransform : 'translate(1400%,0)',
     mozTransform : 'translate(1400%, 0)',
     msTransform : 'translate(1400%, 0)',
     oTransform : 'translate(1400%, 0)',
     transform : 'translate(1400%, 0)',
     transition: 'all 1.75s ease-in-out'

     });

$('#third').css({
     webkitTransform : 'translate(1400%,0)',
     mozTransform : 'translate(1400%, 0)',
     msTransform : 'translate(1400%, 0)',
     oTransform : 'translate(1400%, 0)',
     transform : 'translate(1400%, 0)',
     transition: 'all .75s ease-in-out'


     });
4

1 に答える 1

0

leftそれらを絶対に配置してから、とに移行できますmargin-left。

jsフィドル

#trans {
    position:absolute;
    top:50px;
    left:0%;
    width:50px;
    height:50px;
    background-color:#00F;
    -moz-transition:all 2s ease;
    -webkit-transition:all 2s ease;
    transition:all 2s ease;
}

#trans.toggle {
    left:100%;
    margin-left:-50px;
}

と同じように、1400% 右に移動しているだけなので、特定のソリューションは機能しません14 * width。

ページの読み込み時に変更するには、クラスをドキュメントに準備します。

jsフィドル

$(document).ready(function () {
    $('#trans').addClass('toggle');
});
于 2013-03-31T14:17:29.320 に答える