Javascript 改变背景位置的动态变量

我发现了一些松散相关的答案，但没有一个具有我需要的可变性

我正在尝试创建一个类似于汽车网站上的变色芯片调色板：当单击一个油漆样本时，主图像的背景位置将发生变化，从而产生油漆颜色已发生变化的错觉。我对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调用：

等等

为了使事情更复杂，有两个颜色变量；正如汽车网站会有外部内饰颜色选择一样，此脚本也需要有外部和内部颜色选项（黑色或白色外部，有4种可能的内部颜色）

---

我认为最好的方法是在y轴上有所有的外部选项，在x轴上有所有的内部选项，但需要定义调用方式，以便单击红色、黄色、蓝色或绿色将移动x轴，但保持当前选择不变（反之亦然）

如果将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?
    }

这是一份声明： 变量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或等效项。因此，您必须在JS中保留一个变量，用于保存每个X和Y值。然后，您的更改函数可以更新变量…然后执行背景位置更改

请看以下代码：

// 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）

在考虑了这一点之后，您可能会考虑使用类名来描述您的后台位置，只是为了便于维护。因此，对于每个颜色组合，只需使用背景位置创建CSS规则。然后，您可以使用JavaScript将CSS规则应用于，而不是数学。谢谢！我首先想到了这一点，但是有了24个（并且越来越多）不同的选项，CSS将开始失控。哦，天哪，jquery库选项要容易得多。谢谢你，伊莱！那么对于外部选择，是否有一个与“*”等价的javascript？可以在html中调用对X的更改而不是对Y的更改吗？太棒了，eli，你是个救命恩人！感谢您花时间解释/为什么/而不是仅仅发布答案
// 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
});

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

<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>