0

これに触発さ れた非常に単純なjQueryロールオーバー関数を作成しました: http://www.smileycat.com/miaow/archives/000224.php。img

img名前に含まれるすべての をチェックし、同じ名前で「_off」ではなく「_on」_offと交換します。img

私のレイアウトでは background を使用できないのでimg、これは便利な解決策だと思います。しかし、関数の実行が遅い場合のように、スワッピングがスムーズではないと感じています。どう思いますか？それを最適化する方法はありますか？

コードは次のとおりです。

    function roll_over() {
        $("img[src*='_off']").hover(
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_off", "_on");
                $(this).attr("src", stringa);
            },
            function() {
                var stringa = $(this).attr("src");
                var stringa = stringa.replace("_on", "_off");
                $(this).attr("src", stringa);
            }
        );
    }
4

4 に答える 4

2

あなたのコードは悪いです。なんで？

  1. 次のような画像が表示されると失敗します。...src="/images/my_office.png"...
  2. 純粋なCSSで実行できる非常に原始的なものにJSを使用します
  3. *_on画像はイベント時に読み込まれるため、しばらくのmouseover間画像は表示されません。

これらすべての問題を修正するにはどうすればよいですか？CSSスプライトを使用します。

  1. 次のような画像を作成します：http ：//www.digart.pl/gfx/ico/s/fb.gif
  2. HTMLコード:(<a href="..." id="myId">blah</a>当然のことながら、要素を使用する必要はありませんA）。

  3. CSSコード：

    #myId {
    display: inline-block; /* or block, or even inline with correct line-height */
    width: 33px;
    height: 20px;
    background: url(/path/to/img) 0 0 no-repeat;
}
#myId:hover {
    background-position: 50% 0;
}

それでもプロセス全体を自動化したい場合は、画像ではなく背景位置を変更するためにのみJSを使用してください。

于 2010-03-12T14:31:52.300 に答える
1

ここで良い機能を見つけました http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html

$("#mylink img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

imgsのIDまたはクラスを指定するだけです

于 2010-03-13T12:57:47.337 に答える
0

次のようなものはどうですか？

// Add an image to your page as:
// <img src="button.png" class="rollover">

<script type='text/javascript'>
$(document).ready(function(){
    initRollovers();
});
function initRollovers() {  
    // Assign a class to the images you want to have as roll-over enabled.
    // Example:
    // <img src="button.png" class="rollover">
    // NOTE: No "dot" when setting the class on the image... But jQuery needs the .dot in order to search for classes in this script:
    var classIdentifier = ".rollover";

    // This example assumes that only the "on" state has a suffix:
    // button.png
    // button_on.png

    // If you have a suffix for both states, edit them here:
    // button_off.png
    // button_on.png
    // ... would be edited as:
    // var offSuffix = "_off.png";
    // var onSuffix = "_on.png";

    var offSuffix = ".png";
    var onSuffix = "_on.png";

    $(classIdentifier).each(function () {

        var obj = $(this);
        var mySrcOff = obj.attr("src");
        var mySrcOn = mySrcOff.replace(offSuffix, onSuffix);
        obj.mouseout(function() {
            $(this).attr("src", mySrcOff);
        });
        obj.mouseover(function() {
            $(this).attr("src", mySrcOn);
        });

        // Preload Off State
        $('<img />').attr('src', mySrcOn).appendTo('body').css('display','none');

    });
}

</script>

。

于 2012-08-11T07:30:25.283 に答える
0

繰り返し行う$("img[src*='_off']")のは非効率です。これは、ブラウザがロールオーバーしたときにページ上のすべてを検索する必要があることを意味します. 最適化に関する情報については、 jQuery Lintを含める必要があります...

于 2010-03-12T14:18:43.430 に答える