1

オブジェクトの 3D モデルを表すさまざまな角度で撮影した 24 枚の画像があります。例のように、Web サイトに 180* 度の回転機能を追加したい オブジェクトは、例に示すように、スクローラーを使用して「回転」する必要があります。また、一部の画像にホットスポットを追加する必要があります。

どうすればこれを達成できますか?

4

1 に答える 1

4

多くの角度からの画像があるので、3D CSS 変換なしで jQuery でこれを行うことができるようです。

すべての画像をロードして、異なる を指定しますid。

<div id="3dview">
  <img src="..." id="angle1" style="display:block;" /> <!-- display this first -->
  <img src="..." id="angle2" />

  <img src="..." id="angle24" />
</div>

CSS 宣言を (およびposition: absoluteと共に) 使用して、それらがすべて重ねて表示されるようにします。デフォルトで非表示 (つまり) であることを確認してください。画像を 1 つだけ表示して、初期角度を表示できます。topleftdisplay:none

#3dview img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}

次に、JavaScript で、おそらく jQuery UI からスライダー コントロールを接続し、 1 つの特定<img />の要素を表示できます (他の要素はすべて非表示のままにします)。コントロールからのイベントをリッスンする必要があります。

$( ".selector" ).on( "slidechange", function( event, ui ) { /* code here */} );

ただし、「左に 1 段階回転」と「右に 1 段階回転」の 2 つのボタンから始めることをお勧めします。これは、唯一のものを探してimg:visible非表示にし、その次/前の兄弟を選択してから表示します。

// code to display the next image (ie 'rotate' by one step)
$("#3dview img:visible").hide().next().show()

ユーザーが最初または最後のビューにいるかどうかを確認し、動作を変更して、ループするか回転を停止する必要がある場合があります。上記のセレクターをチェーンするだけで試すことができます:not(:last-child):not(:first-child)。

于 2013-08-08T07:52:40.217 に答える