0

フルスクリーンのスライドショーを作成していますが、位置、余白、そして ScrollTo を使用して左右のスライドを作成しようとしました。

しかし、そのたびに、乗り越えなければならないパフォーマンスのギャップが常に存在します。これを行うための良い方法をまだ見つけていないので、助けを求めています。純粋な CSS も試してみましたが、これはうまく機能しましたが、必要なブラウザーでは機能しませんでした。

ここに簡単なデモがあります: http://jsfiddle.net/qkRvS/2/embedded/result/ とコード: http://jsfiddle.net/qkRvS/2/

これをできるだけスムーズにするために、誰かが私を正しい方向に向けることができますか? 画像の変更ごとに少し問題があるようです。

ありがとう！

4

2 に答える 2

1

残念ながら、あなたにとって幸せな答えはないと思います。CSS3 トランスフォームの CSS3 トランジションは、それをサポートするブラウザーで最高のパフォーマンスを発揮します。ie7-8 では、leftプロパティを操作することで out がスクロールを実行しますが、in は ie7-8 でひどく滑らかに見えることはありません。Firefox のパフォーマンスも良くありませんが、改善されています。left場合によっては、firefox の方がよりパフォーマンスが高いことがわかりました-moz-transformが、それは最後のバージョンで変更された可能性があります。だからヒント：

  • 画像をできるだけ圧縮します。可能であれば .jpg を使用してください。
  • 各ブラウザで各メソッドのテストを行う
  • 各ブラウザで最もパフォーマンスの高い方法を使用する
  • jQuery の animate メソッドを使用している場合は、フレームレートを 16 ミリ秒から 30 ミリ秒程度に微調整して、ブラウザーが再描画によって打撃を受けないようにすることができます。
于 2012-09-11T20:10:39.473 に答える
0

私はそれを考え出した。オーバーフローした div で CSS3 トランジションと「左」を使用するだけで、再描画が少なくなります。

于 2012-09-12T12:53:38.300 に答える