【jQuery & CSS】2016年申年のおみくじ

今年もおみくじを作成しました。
cssアニメーションによるホバーの動き・クリック時の回転、CSVでの文章の読み込み処理など、技術学習のために作成したページです。
閲覧タイミングによっては、出力結果のCSVがまだダミーテキストになっています…。(2016/01/01までにすべてのテキストを公開しました。)


リンク:2016年申年のおみくじ

参考と素材
ホバーの動き:Hover.css
クリック時の回転:CSS3でアニメーション【vol.4】- クリックでアニメーションを実行させる方法(複数同時実行例含む)
おみくじの筒画像:おみくじの入っている筒を描いたイラスト。お正月の初詣のデザインに。
CSVの読み込みについて:jQueryでCSVを読み込んでみる

2015年未年のおみくじはこちら↓

3 thoughts on “【jQuery & CSS】2016年申年のおみくじ

  1. アース says:

    はじめまして。
    サイト拝見させていただき、勉強しております。
    早速ですが、おみくじクリック後にテキストではなく用意した画像を結果として表示したいのですが、どう修正すればよろしいかご教授していただけますでしょうか?
    よろしくお願いします。

    • ofuta says:

      アースさん
      コメントありがとうございます。
      (返信が大変遅くなりすみません。)
      以下、回答となります。

      ▼背景画像として表示する場合
      【jQuery】おみくじ 二号機にて使用しています。以下の部分が該当します。

      $(function() {
      	$("#getFortune").click(function() {
      		/* 0から100の範囲 */
      		var result = Math.floor( Math.random() * 100 );
      		if( result < = 14 ) {//0以上14未満//大吉
      			$('#bodyArea').css('background-image', 'url(images/excellent_luck.jpg)');
      		} else if( 14 < result && result <= 39 ) {//15以上39未満//中吉
      			$('#bodyArea').css('background-image', 'url(images/chukichi.jpg)');
      		} else if( 39 < result && result <= 64 ) {//40以上64未満//小吉
      			$('#bodyArea').css('background-image', 'url(images/shokichi.jpg)');
      		} else if( 64 < result && result <= 79 ) {//65以上79未満//末吉
      			$('#bodyArea').css('background-image', 'url(images/sueyoshi.jpg)');
      		} else if( 79 < result && result <= 94 ) {//80以上94未満//凶
      			$('#bodyArea').css('background-image', 'url(images/misfortune.jpg)');
      		} else {//95以上100未満//大凶
      			$('#bodyArea').css('background-image', 'url(images/daikyo.jpg)');
      		}
      
      	});
      });
      

      ▼imgでHTML上に表示する場合
      HTML上に、imgの読み込み位置を用意して

      <img src="image/0.jpg" alt="この画像が切り替わります。" id="img">
      

      jQueryでクリックの際にsrcとaltの中身を変更

      $(function() {
      	$("#getFortune").click(function() {
      		/* 0から100の範囲 */
      		var result = Math.floor( Math.random() * 100 );
      		if( result < = 14 ) {//0以上14未満//大吉
      			$("#img").attr({"src":"image/1.jpg","alt":"大吉"});
      		} else if( 14 < result && result <= 39 ) {//15以上39未満//中吉
      			$("#img").attr({"src":"image/2.jpg","alt":"中吉"});
      		} else if( 39 < result && result <= 64 ) {//40以上64未満//小吉
      			$("#img").attr({"src":"image/3.jpg","alt":"小吉"});
      		} else if( 64 < result && result <= 79 ) {//65以上79未満//末吉
      			$("#img").attr({"src":"image/4.jpg","alt":"末吉"});
      		} else if( 79 < result && result <= 94 ) {//80以上94未満//凶
      			$("#img").attr({"src":"image/5.jpg","alt":"末吉"});
      		} else {//95以上100未満//大凶
      			$("#img").attr({"src":"image/6.jpg","alt":"大凶"});
      		}
      	});
      });
      

      で、いかがでしょうか?

コメントを残す

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