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（ “目标”）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>

Answer 2

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

用于更改backgroundPosition的动态变量

2 个答案: