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

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

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

no image

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

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

no image

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

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

no image

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

前回はテンプレートファイルのカスタマイズをしたのでその続きから始めます。 Classファイルの修正 ディレクトリ内の『data/class/』に各種クラスファイルが保存されています。修正や追加をする場 …

no image

get_postsでカスタムフィールドにチェックボックスを使っていた場合

WordPressのプラグイン「Advanced Custom Fields」を使ってカスタムフィールを使い、表示するかしないかの判定をするために、フィールドタイプをチェックボックスにしてカスタムフィ …

記事を探す