Question

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

我正在使用名为Spritespin的jQuery插件创建一个椅子的转盘动画。我有它的设置，所以它加载了椅子绕其轴旋转的长条形精灵。

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个精灵条放入一个巨大的图像（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语句的变量（减少文件大小），使用类似<的变量/ p>

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

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

在JavaScript中更改图像的位置

1 个答案: