3

さまざまなマウス操作に応じて変化するボタンのグループの外観を駆動するスプライトシートがあります。ただし、スプライトを切り替えるとちらつきが見られ、chrome または firebug でネットワーク パネルを見ると、スプライトが変更されるたびにスプライト シートがリロードされていることが確認されます。これは、スプライト シートを使用するポイントを無効にします。

スプライトのスワップアウトを処理する jquery コードは次のとおりです。

$(".btn").mouseover(function () {
    var imgId = $(this).prop("id");
    if (imgList[imgId]) {
        if (!$(this).hasClass(imgList[imgId]["inactive"])) {
            $(this).removeClass(imgList[imgId]["all"]).addClass(imgList[imgId]["mouseOver"]);
        }
    }
});

$(".btn").mousedown(function () {
    var imgId = $(this).prop("id");
    if (imgList[imgId]) {
        if (!$(this).hasClass(imgList[imgId]["inactive"])) {
            $(this).removeClass(imgList[imgId]["all"]).addClass(imgList[imgId]["mouseDown"]);
        }
    }
});

$(".btn").mouseout(function () {
    var imgId = $(this).prop("id");
    if (imgList[imgId]) {
        if (!$(this).hasClass(imgList[imgId]["inactive"])) {
            $(this).removeClass(imgList[imgId]["all"]).addClass(imgList[imgId]["default"]);
        }
    }
});

imgList は、スプライトを適用するために使用されるクラス名のリストであり、すべてがクラスの完全なリストです。サンプルは次のとおりです。

imgList["navToggleNavigation"] = [];
imgList["navToggleNavigation"]["default"] = "NavShowHide-Button-normal";
imgList["navToggleNavigation"]["mouseOver"] = "NavShowHide-Button-mouseOver";
imgList["navToggleNavigation"]["mouseDown"] = "NavShowHide-Button-mouseDown";
imgList["navToggleNavigation"]["inactive"] = "NavShowHide-Button-inactive";
imgList["navToggleNavigation"]["select"] = "NavShowHide-Button-select";
imgList["navToggleNavigation"]["all"] = "NavShowHide-Button-normal NavShowHide-Button-mouseOver NavShowHide-Button-mouseDown NavShowHide-Button-inactive NavShowHide-Button-select";

これらの各クラスの CSS コードは、シート内の画像を参照します。

.NavShowHide-Button-inactive{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-704px 0px ; height: 44px; width: 44px; display: inline-block;}
.NavShowHide-Button-mouseDown{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-748px 0px ; height: 44px; width: 44px; display: inline-block;}
.NavShowHide-Button-mouseOver{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-792px 0px ; height: 44px; width: 44px; display: inline-block;}
.NavShowHide-Button-normal{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-836px 0px ; height: 44px; width: 44px; display: inline-block;}
.NavShowHide-normal{background-image:url('../Images/navigation-spritesheet.png') ; background-position:-880px 0px ; height: 44px; width: 44px; display: inline-block;}

このコードには、実行時にスプライトシートがリロードされる原因となるものはありますか? より良いアプローチはありますか？

4

1 に答える 1

2

すべてのクラスでを宣言する代わりに、 をbackground-image持つ単一のクラス名 ( など.NavShowHide) を用意background-imageし、より具体的なクラスを使用してbackground-positionのみを定義する必要があります。

.NavShowHide {
    background-image:url('../Images/navigation-spritesheet.png'); 
    height: 44px; 
    width: 44px; 
    display: inline-block;
}
.NavShowHide-Button-inactive{background-position:-704px 0px;}
.NavShowHide-Button-mouseDown{background-position:-748px 0px;}
.NavShowHide-Button-mouseOver{background-position:-792px 0px;}
.NavShowHide-Button-normal{background-position:-836px 0px;}
.NavShowHide-normal{background-position:-880px 0px;}

次に、要素に両方のクラスの組み合わせを与えます。つまり:

<div class="NavShowHide NavShowHide-Button-normal">My Button</div>
于 2013-04-04T18:44:54.550 に答える