当前位置：文江博客话题详情

jQuery UI 中是否支持 CSS 精灵

发布于 2024-09-19 17:09:48 字数 86 浏览 3 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鼻尖触碰 2024-09-26 17:09:49

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

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

http://csssprites.com/

回复收藏 0 原文

晨光如昨 2024-09-26 17:09:49

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

@Mark：选项卡演示使用一张图像

回复收藏 0 原文

_畞蕅 2024-09-26 17:09:49

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

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

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

例如，这是一个使用精灵和 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('https://i.sstatic.net/vPDBk.gif') 0 0; }

.next {
width:43px;
height:44px;
background:url('https://i.sstatic.net/vPDBk.gif') -47px 0; }

.prev {
width:43px;
height:44px;
background:url('https://i.sstatic.net/vPDBk.gif') -91px 0; }

Depending on the specific tasks you want to accomplish, which you do not specify in the OP, you might no need a plugin at all.

A possible way to use sprites with jQuery is to create a separate class for each sprite state, and then use jQuery to change the class attribute of the element showing the sprite with .attr():

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

For example here is a super simple image gallery making use of sprites and jQuery:

jsFiddle example

Script:

$(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('https://i.sstatic.net/vPDBk.gif') 0 0; }

.next {
width:43px;
height:44px;
background:url('https://i.sstatic.net/vPDBk.gif') -47px 0; }

.prev {
width:43px;
height:44px;
background:url('https://i.sstatic.net/vPDBk.gif') -91px 0; }

回复收藏 0 原文

吻安 2024-09-26 17:09:49

为什么不在 CSS 中完成这一切呢？ A la：

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-精灵/

Why not do it all in CSS? A la:

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

This'll get you started on actually implementing it: http://css-tricks.com/css-sprites/

回复收藏 0 原文

~没有更多了~