jquery - jQuery UI 中是否有 CSS 精灵支持

Question

我正在研究使用 CSS 精灵，但不想发明轮子。jQuery 或 jQuery UI 中是否存在现有支持？或者作为替代方案，一个调试良好的 jQuery 插件

Answer 1

使用 sprite 取决于您想要的位置部分的偏移量——javascript 无法访问图像数据，那么怎么会有这样的事情呢？

不过，有一些工具可以帮助您制作精灵并为您提供基本的 CSS。这是我最喜欢的：

http://csssprites.com/

Answer 2

有一些很好的jquery-tool 演示，您可以复制然后修改。他们有很好的做法。我将从选项卡锚演示开始，他们的样式表写得很好。

@Mark：标签演示使用一张图片

Answer 3

为什么不全部在 CSS 中完成呢？啦啦：

btn
{
width:50px;
height:50px;
background:url(images/btnspite.png) -30px 100px;
}
btn:hover
{
background-position:-30px -150px;
}
btn:active
{
background-position:-30px -200px;
}

这将使您开始实际实施它： http ://css-tricks.com/css-sprites/

Answer 4

根据您想要完成的特定任务，您没有在 OP 中指定，您可能根本不需要插件。

在 jQuery 中使用 sprite 的一种可能方法是为每个 sprite 状态创建一个单独的类，然后使用 jQuery 使用.attr()更改显示 sprite 的元素的 class 属性：

  // Change the sprite state of an element
$(elementSelector).attr("class", spriteClassOfChoie);

例如，这是一个使用 sprite 和 jQuery 的超级简单的图片库：

jsFiddle 示例

脚本：

$(function() {

      // The sprite classes
    var sprites = ["home", "next", "prev"];

      // Which image is showing
    var showing = 0;

      // Show the first image
    $("#gallery").addClass(sprites[showing]);

      // Add a click handler to change sprite states
    $("input").click(function() { 

          // Cycle through images by making use of sprites
        $("#gallery").attr("class", sprites[(++showing % sprites.length)]);
    });
});​

HTML：

<input type="button" value="Show Next Image" />
<br/><br/>
<div id="gallery"></div>

CSS：

.home {
width:46px;
height:44px;
background:url('http://i.stack.imgur.com/vPDBk.gif') 0 0; }

.next {
width:43px;
height:44px;
background:url('http://i.stack.imgur.com/vPDBk.gif') -47px 0; }

.prev {
width:43px;
height:44px;
background:url('http://i.stack.imgur.com/vPDBk.gif') -91px 0; }