JavaScript内の画像の位置を変更する

Question

この問題の正しい説明をお寄せください。そうでない場合は、私を許してください。私はここでJavaScriptを初めて使っています。

SpritespinというjQueryプラグインを使用してチェアのターンテーブルアニメーションを作成しています。私はそれがそれの軸の周りを回転する椅子のスプライトの長いストリップをロードするようにそれをセットアップしました。

SpritespinのWebサイトには、動作させるためにオブジェクト表記のどのパラメータを変更できるかが示されています。これは、次のようになります。

// initialize the spritespin 
$(".spritespin").spritespin({ 
    width  : 640, 
    height  : 640, 
    frames  : 24, 
    resolutionX : 15360, 
    resolutionY : 640, 
    image  : "turntable/images/LC-01_strip_black.jpg", 
    (some more code..) 
}); 

あなたが見ることができるように、私がしなければならないすべては（私の場合）のストリップを作成している24枚の、640×640の画像やリンク、それに。

問題はいくつかの機能を追加したいということです。私は回転チェアの側面に色見本を用意して、ユーザーが別の色を選ぶようにしたいと思います。

私の考えは、7つのスプライトストリップすべてを1つの巨大な画像（15360 x 4480）に入れ、どのスウォッチがクリックされたかに基づいてy位置をシフトすることです。しかし、私はそのコードを書く方法がわからない、あるいはそれが賢明な方法であるかどうかは分かりません。

これは私の見本が今設定されている方法です。

<div id="colourSwatches"> 
    <a href="" id="swatch01"><div id="swatchBlack"></div></a> 
    <a href="" id="swatch02"><div id="swatchBlue"></div></a> 
    <a href="" id="swatch03"><div id="swatchBrown"></div></a> 
    <a href="" id="swatch04"><div id="swatchPink"></div></a> 
    <a href="" id="swatch05"><div id="swatchRed"></div></a> 
    <a href="" id="swatch06"><div id="swatchTurquoise"></div></a> 
    <a href="" id="swatch07"><div id="swatchYellow"></div></a> 
</div> 

私はそれがあまりにも複雑ではなかったと誰かが私を助けることができることを願っています。

Answer 1

私はspritespin.jsファイルを見て、offsetX/Yまたは使用していたイメージのいずれかを変更する機能がありませんでした。

$('a').click(function() { 
    var swatch = $(this).attr('id'); 
    if(swatch == "black") { 
    $(".spritespin").spritespin({ 
     width  : 640, 
     height  : 640, 
     frames  : 24, 
     resolutionX : 15360, 
     resolutionY : 640, 
     image  : "turntable/images/LC-01_strip_black.jpg", 
     (some more code..) 
    }); 
    } 
}); 

あなたはif文（経由する変数に設定するようimage :オプションを変更するには進むことができ、さまざまな方法が明らかにあります。しかし、あなたが再び変更などでDIVにspritespin関数を呼び出すことができそうです

image : "turntable/images/LC-01_strip_" + swatch + ".jpg" 

などの変数を使用するか、AJAXまたはJSONを使用してファイル名を読み込みます）。残念なことに、これがDOMにどのような影響を与えるか、リンクを100万回クリックするとブラウザが壊れることはわかりません。