5

CSS スプライトの使用を検討していますが、ホイールを発明したくありません。jQuery または jQuery UI に既存のサポートはありますか? または、別の方法として、十分にデバッグされた jQuery プラグイン

4

4 に答える 4

4

スプライトの使用は、必要な位置の部分へのオフセットの量に依存します.javascriptは画像データにアクセスできないので、どうしてそんなことがあるでしょうか?

ただし、スプライトを作成し、ベース CSS を提供するのに役立つツールがいくつかあります。これが私のお気に入りです：

http://csssprites.com/

于 2010-09-16T18:22:10.207 に答える
2

コピーして変更できる優れたjquery-tool デモがいくつかあります。彼らには良い習慣があります。タブ アンカーのデモから始めます。スタイルシートは適切に作成されています。

@Mark: タブのデモでは1 つの画像を使用します

于 2010-09-16T18:20:38.573 に答える
1

OP で指定しない、達成したい特定のタスクによっては、プラグインがまったく必要ない場合があります。

jQuery でスプライトを使用する方法として、スプライトの状態ごとに個別のクラスを作成し、jQuery を使用してスプライトを表示する要素の class 属性を.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('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; }
于 2010-09-16T18:58:29.913 に答える
1

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/

于 2010-09-16T18:24:46.023 に答える