0

JSで画像をアニメーション化するのに問題があります。アニメートするだけwidthでheight問題なく動作する場合。top/marginTop、を追加すると問題が発生しleft/marginLeftます。使いたい理由はズーム効果です。ただし、値を追加するよりも、最初にwidthとを追加していると思います。それは見栄えが悪く、私はそれを取り除くことができない「けいれん」効果を生み出します。heighttop/left

これが私の単純なスライダーの実例ですhttp://łuckoś.pl/slider/

私もすべてを試しましたjQuery.fx.interval = 50;

お時間をいただきありがとうございます

4

3 に答える 3

1

より良い結果を得るには、次のようなCSSプロパティを使用する必要があります。

#container{
    overflow:hidden;
    width:489px;
    height:178px;
    position:relative;

}
#container img{
    position:relative;
    margin:auto;
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
}

#container img.zoom { 
   -moz-transform: scale(2);
   -webkit-transform: scale(2);
   -o-transform: scale(2);
   transform: scale(2);
   -ms-transform: scale(2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   M11=2, M12=-0, M21=0, M22=2);
}

およびjavascript：

$().ready(function(){
    $('img').addClass('zoom');
});

ズームクラスを追加すると、画像は4秒で2に拡大縮小されます。

完全なデモンストレーションを参照してください：http：//jsfiddle.net/rNY6T/18/

于 2012-08-03T07:28:35.050 に答える
0

幅は左の位置に比例し、高さは上の位置に比例してアニメートする必要があると思います。2pxの幅を狭くすると、1pxから左にずらします。

于 2012-08-01T08:29:39.150 に答える
0

ズームする必要がある場合..これを追加します..

-moz-transform: scale(2); 
-webkit-transform: scale(2);
-o-transform: scale(2);

IEに相当するものだと思いますが-ms-transform、私はそれを使用していませんscale。

于 2012-08-01T08:31:24.583 に答える