1

大まかに関連する回答をいくつか見つけましたが、必要なレベルの変動性を持つものはありません。

自動車の Web サイトで見られるような、色が変化するチップ パレットを作成しようとしています。ペイントの見本をクリックすると、メイン イメージの背景の位置が変化し、ペイントの色が変化したように見えます。私はまだ JavaScript に慣れていませんが、これが最もエレガントな方法だと思います。誰かが構文を実際の作業スクリプトに組み込むのを手伝ってもらえますか?

css の定義:

#target { 
     background: url("/images/center-stage.jpg") no-repeat; 
     background-position: 0 0;
}

外部スクリプト ファイルの関数:

function colorChange(x,y)
{
    var x=("x" + px); // i don't get how to format this stuff
    var y=("y" + px);
    document.getElementById("target").style.backgroundPosition="(,)"; // this doesn't really go here, does it?
}

および html 呼び出し:

<a href="#" onclick="colorChange(0,50)"><img src="/images/swatches/red.jpg"></a>
<a href="#" onclick="colorChange(0,100)"><img src="/images/swatches/yellow.jpg"></a>
<a href="#" onclick="colorChange(0,150)"><img src="/images/swatches/blue.jpg"></a>
<a href="#" onclick="colorChange(0,200)"><img src="/images/swatches/green.jpg"></a>

等々。

さらに複雑なことに、2 つの色変数があります。車の Web サイトにエクステリア インテリア カラーの選択肢があるのと同様に、このスクリプトにもエクステリア カラーとインテリア カラーのオプションが必要です (エクステリアは黒または白、エクステリアは 4 色の可能性があります)。

これを行う最善の方法は、すべての外部オプションを y 軸に、すべての内部オプションを x 軸に配置することだと思いましたが、赤、黄、青、または緑をクリックすると x 軸が移動するように呼び出しを定義する必要があります。 -軸ですが、現在の選択を同じに保ちます (逆も同様)

4

2 に答える 2

2

JS を次のように変更した場合:

function colorChange(x,y) {
    document.getElementById("target").style.backgroundPosition=x+'px '+y+' px'; 
}

背景画像が動き始めます。あなたの例でうまくいかなかった理由：

function colorChange(x,y)
    {
        var x=("x" + px); // i don't get how to format this stuff
        var y=("y" + px);
        document.getElementById("target").style.backgroundPosition="(,)"; // this doesn't really go here, does it?
    }

このステートメントは次のとおりです: var x=("x" + px);

「x」は変数であり、引用符で囲む必要がないため、これは機能しません。また、「px」は文字列であり、引用符で囲む必要があるため、ステートメントは次のようになります。 var x = x+'px';

ここで、次のステートメントで: document.getElementById("target").style.backgroundPosition="(,)";

「var x = x+"px"」を使用せずに値を直接設定できるため、次のようになります。

document.getElementById("target").style.backgroundPosition=x+'px '+y+' px';

また、好奇心から、jQuery を使用していますか、それとも jQuery タイプの JS ライブラリを使用していますか? 言う代わりに：

document.getElementById("target").style.backgroundPosition=x+' '+y

あなたは言うことができます：

$("#target").css('background-position', x+'px '+y+'px');

** 編集 **

x と y の両方ではなく、必要な値のみを更新するには: CSS では、background-position-x または同等のものはありません。したがって、X 値と Y 値のそれぞれを保持する変数を JS に保持する必要があります。次に、変更関数が変数を更新できます...そして、背景位置の変更を行います。

このコードを見てください：

// variable outside of function() scope
var xposition, 
     yposition;

// Update values of xposition and or yposition
function updatePositions(axes) { // Should be {x:0,y:0}
    // Check to see which axis was passed in x, y or both, then update values
     if (typeof(axes.x) !== 'undefined') xposition = axes.x;
     if (typeof(axes.y) !== 'undefined') yposition = axes.y;

//Call function to actually move BG image
colorChange();
}

// Function move BG image, using variables declared above
function colorChange() {
    // Use xposition and yposition which are changed by JS function above
    $("#target").css('background-position', xposition+'px '+yposition+'px');
}

$(document).ready(function() {
    updatePositions({x:0,y:0}); // Initialize to starting position
});

上記の {x:0,y:0} コードは、複数の値を持つ関数にパラメーターを渡すために使用している方法にすぎません。
{} は Javascript の「オブジェクト」を意味するので、次のように言えます。

var obj = {};
obj.x = 150;
obj.y = 200;
console.log(obj);

出力: オブジェクト {x: 150, y:200}

HTML (x と y、または x のみ、または y のみを渡すことができることに注意してください)

<a href="#" onclick="updatePositions({x:0,y:50})"><img src="/images/swatches/red.jpg"></a>
<a href="#" onclick="updatePositions({x:0,y:100})"><img src="/images/swatches/yellow.jpg"></a>
<a href="#" onclick="updatePositions({x:0})"><img src="/images/swatches/blue.jpg"></a>
<a href="#" onclick="updatePositions({y:200})"><img src="/images/swatches/green.jpg"></a>
于 2012-06-04T20:44:33.587 に答える
0 
function colorChange(x,y)
        {
            var positionX = x + "px";
            var positionY = y + "px";
            document.getElementById("target").style.backgroundPosition = positionX + " " + positionY;
        }
于 2012-06-04T20:29:49.607 に答える