javascript - 在 JavaScript 中更改图像的位置

Question

我希望这是对这个问题的正确描述。如果不是，请原谅我，我是新来的，也是 JavaScript 的新手..

我正在使用名为 Spritespin 的 jQuery 插件创建椅子的转盘动画.我对其进行了设置，因此它加载了一长条围绕其轴旋转的椅子 Sprite 。

Spritespin 网站显示了我可以更改对象符号的哪些参数以使它正常工作。这是它的样子:

// initialize the spritespin
$(".spritespin").spritespin({
    width       : 640,
    height      : 640,
    frames      : 24,
    resolutionX : 15360,
    resolutionY : 640,
    image       : "turntable/images/LC-01_strip_black.jpg",
    (some more code..)
});

如您所见，我所要做的就是创建一条(在我的例子中)24 张 640 x 640 图像并链接到它。

问题是我想添加一些功能。我想在旋转椅的一侧放置一组颜色样本，让用户可以选择不同的颜色。

我的想法是将所有 7 个 sprite 条放入一个巨大的图像 (15360 x 4480) 中，并根据单击的样本移动其 y 位置。但我不知道如何编写该代码，或者它是否是最明智的实现方式。

这就是我的色板现在的设置方式:

<div id="colourSwatches">
    <a href="" id="swatch01"><div id="swatchBlack"></div></a>
    <a href="" id="swatch02"><div id="swatchBlue"></div></a>
    <a href="" id="swatch03"><div id="swatchBrown"></div></a>
    <a href="" id="swatch04"><div id="swatchPink"></div></a>
    <a href="" id="swatch05"><div id="swatchRed"></div></a>
    <a href="" id="swatch06"><div id="swatchTurquoise"></div></a>
    <a href="" id="swatch07"><div id="swatchYellow"></div></a>
</div>

我希望这不是太令人费解并且有人可以帮助我。

Answer 1

我查看了 spritespin.js 文件，没有看到任何更改 offsetX/Y 或它正在使用的图像的函数。但是，您似乎可以通过更改再次调用 div 上的 spritespin 函数，例如:

$('a').click(function() { 
    var swatch = $(this).attr('id');
    if(swatch == "black") {
     $(".spritespin").spritespin({
       width       : 640,
       height      : 640,
       frames      : 24,
       resolutionX : 15360,
       resolutionY : 640,
       image       : "turntable/images/LC-01_strip_black.jpg",
       (some more code..)
     });
    } 
});

显然有不同的方法可以继续更改 image : 选项，例如将其设置为一个变量，该变量通过 if 语句(减少文件的大小)，使用变量类似

image : "turntable/images/LC-01_strip_" + swatch + ".jpg"

或使用 AJAX 或 JSON 读取文件名。遗憾的是，我不知道这对 DOM 有何影响，或者点击链接 100 万次是否会破坏浏览器。