用于改变 backgroundPosition 的动态变量

Question

我找到了一些松散相关的答案，但没有一个具有我需要的可变性水平。

我正在尝试创建一个与您在汽车网站上找到的类似的变色芯片调色板：当单击油漆样本时，主图像的背景位置会发生变化，从而产生油漆颜色发生变化的错觉。我还是 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 个颜色变量；就像汽车网站可以选择外部内部颜色一样，此脚本也需要具有外部和内部颜色选项（黑色或白色外部以及 4 种可能的内部颜色）。

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

Answer 1

如果把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 或等效项。所以你必须在 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）

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