1

jqueryを使用して一度に1つずつローテーションを実装しています。「touchmove」、「swipeleft」、「swiperight」などを使用して、一度に 1 つずつ回転させたい画像がいくつかあります。

まず、すべての画像を配置できる背景を作成します。私の問題は、開始時に静的な値 (左上) を指定し、swipeleft および swiperight イベントで左上の値を変更できることです。

これは私が達成したいことです: 円形ペインのあるブラウザーのスクリーンショット

私のコード:

<body>

<div class="outer-container">


</div>
</body>

.outer-container{
background-image: url(images/dial.png);
width: 400px;
height: 403px;
background-size: cover;
top: 280px;
left: 32%;
position: absolute;
}

これは今のように見えます：

ボタンのない円形ペインのブラウザーのスクリーンショット

4

1 に答える 1

0

新しい画像を追加する場合: これらをたくさん入れて、<img src="--path--" style="position:absolute;top:--value--;left:--value--;" id="--uniqueID--"></img>--path-- を画像へのパスに置き換え、 --value-- を適切な位置に置き換えます。また、--uniqueID-- を一意の ID に置き換えます (2 つの画像が同じ ID を持つことはできません)。

何を求めているのか完全にはわかりませんが、ページにスタイルシートを含めて初期値topとleft値を設定し、jQuery の .css() を使用してそれらの値を動的に変更できます。

$('.outer-container').on('swipeleft',function(e){
      e.preventDefault();
      $('#--uniqueID--').css("left",newLeftValue);
      $('#--uniqueID--').css("top",newTopValue);
});

--uniqueID-- を移動する画像に置き換えます。

newLeftValue と newTopValue を適切な値に置き換えます。

jQuery の css メソッドの詳細については、 http://api.jquery.com/css/を参照してください。

于 2013-09-05T09:53:08.147 に答える