suzuboss.info

実際に使ってみた・試してみた経験が誰かの「かゆいところに手が届く」なら幸いです。

Web系

リンク画像をロールオーバーでクロスフェードさせる

投稿日:2015/04/06 更新日:

jQuery v1.10.2で動いています。

aタグに含まれた画像のフェードタイプのロールオーバーです。画像のファイル名の末尾には「_on」「_off」をつけておきます。aタグ内に画像もテキストも含まれる場合に便利かと思います。スマホの場合はロールオーバーの意味がなくなるのでOFFに。

追記:2015/04/10
レスポンシブの環境下で使った場合にうまくサイズが取得出来ていなかったので修正。

$(function(){

    if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        //スマホはOFF
    }else{    
    
        //ロールオーバー
        var h_on_sec = 500;
        var h_of_sec = 200;
        $("a").each(function(){
            if($(this).find("img[src*='_off.']").length){
                obj = $(this).find("img[src*='_off.']");
                url = obj.attr("src").replace("_off.", "_on.");
                cls = $(this).find("img").attr("class");

                img = $("<img>");
                img.attr("src", url);
                img.attr("width", obj.width());
                img.attr("height", obj.height());
                img.css({
                    "position":"absolute",
                    "opacity":0
                });
                img.addClass("on_img");
                if(cls != null) img.addClass(cls)
                
                if(jQuery.support.checkOn && jQuery.support.htmlSerialize && !window.globalStorage){ //Operaバグ対策
                    obj.before("<div style=\"display:inline-block;\" class=\"on_img\" ></div>");
                }
                obj.css("position", "relative").before(img);

                $(this).hover(
                    function(){
                        obj = $(this).find("img:not('.on_img')");
                        img = $(this).find("img.on_img");
                        img.attr("width", obj.width());
                        img.attr("height", obj.height());
                        img.stop(true, true).animate({opacity:"1"}, h_on_sec);
                        obj.stop(true, true).animate({opacity:"0"}, h_on_sec);
                    },
                    function(){
                        $(this).find("img.on_img").stop(true, true).animate({opacity:"0"}, h_of_sec);
                        $(this).find("img:not('.on_img')").stop(true, true).animate({opacity:"1"}, h_of_sec);
                    }
                );
                
            }
        });
    
    }

});

良さそうなのが無かったので書いてみました。

-Web系

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Google Chartsを使った簡単な折れ線グラフ

時々ですが、Webページにグラフを埋め込む必要があったりする場面があります。検索をすればサンプルはたくさんできてくるので大変ありがたい所です。使うライブラリとしては「Google Charts」と「C …

no image

EC-CUBEで規格以外に項目を追加した①

試行錯誤の末に問題なく動作するようになったと思うので、メモ的に残しておきます。 利用したEC-CUBEのバージョンは『2.13.2』です。テンプレートは『EC-CUBE on Bootstrap3』に …

no image

jQuery Mobileでページ内アンカーと外部からのアンカー

ほとんど触ったことのない『jQuery Mobile』ですが、少し触る機会がありました。 ハッシュタグを使ったアンカーで、通常はハッシュタグで指定の箇所へページ内アンカーとして動くのですが、jQuer …

Logicool C310(V-U0015)をSkypeで使ってみた

在宅の方と仕事をする際にSkypeを使っています。顔を見ながら話せると電話よりも伝わるのでいいですよね。 デスクトップでSkypeを使う時にはWebカメラを利用しています。使っているのはロジクールの「 …

no image

EC-CUBEで規格以外に項目を追加した③

前回はフロント側のクラスまわりをカスタマイズしたのでその続きから始めます。 受注管理あたりをカスタマイズすることになります。

記事を探す