【jQuery】「ページ先頭へ戻る」ボタンの画像をランダムに切り替えてみる

「大阪好っきゃ麺」のWEBサイトリニューアルをやってて、ふと”先頭に戻る”のボタン画像をオモロい画像でいろいろ切り替えたいなぁなんてイタズラ心がムクムクと出てきました。

さっそく突っ込んでみたのがこちら。
ページ読み込みの都度に抽選して、4回に一回だけゴリラチームのアイコン画像が出てきます。

では実装。
理屈は簡単です。

①ページを読み込んだときにアイコン画像のうちどれを使うかをランダムに決定

▼

②画像をJSで置き換える。

▼

③画面をある程度スクロールしたら指定されたアイコン画像が出現…

たったこれだけww

コードサンプル

あ、コードを仕込むサイトは基本的にWordpressで作成されたものを想定してます。

1.画像を用意

切り替えたい数分だけ画像を用意します。
画像のサイズはCSSでも指定するので同じサイズにそろえといた方が良いです。

画像1：ファイル名…to-top.png

画像1：ファイル名…to-top-2.png

画像ファイルはすべて同じ場所（ここではテンプレートフォルダの直下に作った”images”フォルダ）に保存します。

2.HTML

「先頭に戻る」の基本機能を盛り込むため、フッターの直前位置などに下記のコードを挿入します。

<!-- footer.phpの先頭 -->
<p class="toTop"><a href="#container">
	<img src="<?php echo get_template_directory_uri(); ?>/images/to-top.png" alt="" id="random-icon"></a>
</p>

5.CSS

アイコン画像まわりのCSSを既存のstyle.cssなどに追加しておきます。
画像のサイズに合わせてwidthやheightを変更します。

/*********************
toTopIcon STYLES
*********************/

.toTop{
	display: none;
	width:160px; /*-- サイズ調整要 --*/
	height:140px;
	position: fixed;
	bottom:10px;
	right:10px;
}

.toTop a{
	display: block;
	width:160px;/*-- サイズ調整要 --*/
	height:140px;
	
	opacity:0.8;
	-moz-opacity:0.8;

}

4.jQuery

ランダムにアイコン画像を指定して上記のHTMLを読み込むごとに変更する手順から、スクロール移動時にアイコン画像を出現させるスクリプトをヘッダー部分（今回はheader.phpのhead内）に追加します。

<script type="text/javascript">
        jQuery(function() {
			var array = [
			//画像を保存するディレクトリ、ファイル名に合わせて以下は適宜修正してください。この例ではランダムに4回のうち1回の確立で”to-top-2.png”が出現という設定
			"<?php echo get_template_directory_uri(); ?>/images/to-top.png",
			"<?php echo get_template_directory_uri(); ?>/images/to-top.png",
			"<?php echo get_template_directory_uri(); ?>/images/to-top.png",
			"<?php echo get_template_directory_uri(); ?>/images/to-top-2.png",
			];
		 
			var l = array.length;
			var r = Math.floor(Math.random()*l);//配列数に合わせて乱数発生させる
			var imgurl = array[r];
			jQuery("img#random-icon").attr({"src":imgurl});//画像のIDに合わせる
			
          var pagetop = jQuery('.toTop');
            jQuery(window).scroll(function () {
               if (jQuery(this).scrollTop() > 150) {
                    pagetop.fadeIn();
               } else {
                    pagetop.fadeOut();
                    }
               });
               pagetop.click(function () {
                   jQuery('body, html').animate({ scrollTop: 0 }, 500);
                      return false;
           });
        });
</script>

こんだけです。

大した機能ではないんですけど、ちょっとだけ楽しくなるってことで（笑）

参考サイト：

[JS]jQuery で画像をランダムに出力する方法