0

私はmax-width: 100%; height: auto;すべての<img>要素とimage slider wrapper.

ブラウザー ウィンドウのサイズを変更すると、画像は正しくスケーリングされますが、周囲の多くの要素が追従せず、位置がずれます。ページが更新されるか、次の画像が画像スライダーに読み込まれると、自動修正されます。何か案は？

デモ- ウィンドウのスケーリング、25 行目の css

4

1 に答える 1

0

Pikachooseライブラリは、各アニメーションのいくつかの要素のサイズを設定します。

<div class="pika-stage" style="height: 355px;">

<div class="pika-aniwrap" style="position: absolute; top: 0px; left: 0px; width: 835px;">

これが、次のアニメーションが発生したときにすべてが自動的に修正される理由です。ソースを調べて、アニメーションのサイズ変更コードを複製し、それを$（window）.resizeイベントハンドラーに入れることができます。Pikachooseのドキュメントを見ると、gotoメソッドがあるようです。

あなたはこのようなことをすることができます： 

$(window).resize(function(){$('#pikame').data('pikachoose').GoTo(3)})

ここで、インデックス3は現在アクティブなスライドです。パフォーマンスを向上させるために、タイムアウトの形式を使用し、それを1回だけ呼び出すことをお勧めします。

var resizeSlider = null

$(window).resize(function(){
  if(resizeSlider) clearTimeout(resizeSlider)
  resizeSlider = setTimeout(function() {
     $('#pikame').data('pikachoose').GoTo(3)
  }, 300)
})

これにより、最後のwindow.resizeイベントの300ms後にgotoが起動されるようになります。

これがあなたにいくつかのアイデアを与えることを願っています。

于 2013-02-10T17:06:05.163 に答える