-1

Ok so im making a slot machine look alike - for this i need to make a sprite of 5 picture lets say 500 height then and 100 width (each image is 100x100). I need it so that i have a button on top of the image and one in the button og the image - so i can go to next picture with the buttom button (new position on the sprite) or previous with the top button.

I hope someone can help me since i have been searching for something i can use all day. Im sure its very simple for some of you guys.

thx

4

1 回答 1

3

我相信你有所有的部分，你只需要把它们放在一起，所以让我们把它分开。

如果您跟踪当前显示的图像，并且知道每个图像的高度，则很容易计算出正确的背景位置。假设我们称您为 tracking-variable i。请注意，它i必须从零开始才能正常工作。我们假设每个图像的高度是 100px。我们还乘以-1得到您需要的负值。

var position = "0 " + (i * 100 * -1) + "px"; // Will be something like "0 -100px"

您可以使用 jQuery 更改背景位置.css()，如下所示：

$("#your-image-container-id").css("backgroundPosition", position);

您可以使用 jQuery 为您的按钮添加一个单击事件侦听器.click()。

$("#your-button").click(function () {
    /* 
    Do your rotation magic here
    For the next button increase i by one and apply the new position
    For the prev button you decrease i by one instead...
    */
});

有了这些，我相信你应该能够组装你需要的代码。如果您卡在某个地方，请随时询问。

更新：

我已经为你组装了一些碎片：

$(function () {    
    var i = 0,
        numberOfImages = 5;

    // Handle click on next button
    $(".next-btn").click(function () {
        // Increase by one, and restart when we reach the last image
        i = ((i + 1) < numberOfImages) ? i + 1 : 0;
        var position = calculateBackgroundPosition(i);
        $(".image-container").css("backgroundPosition", position);
    });
});

function calculateBackgroundPosition(index)
{
    return "0 " + (index * 100 * -1) + "px";
}

它也可以在这个 fiddle中找到。剩下要做的是实现上一个按钮，但这将是您的任务。看看 next-button 是如何实现的，然后试试看！

更新 2：

在 Firefox 中为背景位置设置动画似乎有点麻烦。我发现这个SO answer描述了一个扩展，以使其在 Firefox 中正常工作。不幸的是 Firefox 不支持background-position-y，并且提到的扩展不支持 jQuery 的backgroundPosition: "+=50px"语法。所以我不得不做一个解决方法。

它不是那么顺利，但是如果您包含上述扩展名。您可以使用以下代码使其工作：

$(function () {    
    var i = 0,
        numberOfImages = 5;

    $(".op").click(function () {
        // Decrease by one, and restart when we reach the first image
        i = ((i - 1) >= 0) ? i - 1 : numberOfImages - 1;
        animate(this, i);
    });

    $(".ned").click(function () {
        // Increase by one, and restart when we reach the last image
        i = ((i + 1) < numberOfImages) ? i + 1 : 0;
        animate(this, i);
    });
});

function calculateBackgroundPosition(index)
{
    return "0 " + (index * 50 * -1) + "px";
}

function animate (that, i)
{
    var position = calculateBackgroundPosition(i);
    $(that).parent().find(".hjul").animate({"backgroundPosition": position});    
}

这也是一个工作示例。

当它到达最后一张图像时，它的表现并不完美，应该重新开始，反之亦然，但它是我目前最好的。

更新 3：

要使其与多个轮子一起工作，您需要i为每个轮子设置一个单独的计数器变量。否则会相互影响。我更新了您的代码，以便 IDhjulwrapper现在是一个类hjulwrapper。ID 必须对单个元素是唯一的。因此，请确保相应地更新您的 CSS。除此之外，您必须将一些代码更新为：

$(function () {

    $(".hjulwrapper").each(function () {

        var i = 0,
            numberOfImages = 5;

        $(".op", this).click(function () {
            // Decrease by one, and restart when we reach the first image
            i = ((i - 1) >= 0) ? i - 1 : numberOfImages - 1;
            animate(this, i);
        });

        $(".ned", this).click(function () {
           // Increase by one, and restart when we reach the last image
            i = ((i + 1) < numberOfImages) ? i + 1 : 0;
           animate(this, i);
        });
    });
});

请注意，我遍历hjulwrapper每个轮子并为每个轮子创建一个单独的微调器。

这是一个工作小提琴：http: //jsfiddle.net/yEhpF/65/

于 2012-07-30T14:57:33.633 回答