用于更改backgroundPosition的动态变量-Java 学习之路

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

我正在尝试创建一个类似于汽车网站上的颜色变化芯片调色板：当点击一个颜色样本时，主图像's background position will change, giving the illusion that the paint color has changed. I'仍然是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 -axis但保持当前选择相同（反之亦然）

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或等效项 . 因此，您必须在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 'Object' ...所以你可以这样说：

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>

回复于 2024-05-06T06:48:55+08:00

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

回复于 2024-05-06T06:48:55+08:00

用于更改backgroundPosition的动态变量

2 回答

相关问题