[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp/index.php?FrontPage]] -[[戻る>HTML/CSS/JavaScript]] *目次 [#q148d6b5] #contents *概要 [#vd489801] SaaS開発で調べたJavaScriptについてのメモ。 *jQuery [#h18c539e] -jQuery 日本語リファレンス~ http://semooh.jp/jquery/ -7つのサンプルでjQueryを学ぼう!~ 「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4~ http://ozpa-h4.com/2012/11/07/jquery-lecture/ *エフェクト [#k0f136b5] **効果音 [#cf0fca98] HTML5 Audio オブジェクトを JavaScript で制御する。 <script> var audio = document.getElementById("audio"); // audioの取得 audio.play(); // mp3の再生 </script> <body> <audio id="audio"> <source src="xxxxx.mp3" preload="auto"> </audio> </body> **アニメーション [#se421493] jQuery - Effects の .animate() のチェーンで実装可能。 以下は、ボタン押下時のアニメーション+効果音。 $(function() { var audio = document.getElementById("audio"); // audioの取得 $('.imgbutton').on('click', function() { audio.play(); // mp3の再生 $(this).animate( { width: '100px', // 小さくしたときのサイズ(幅) height: '110px' // 小さくしたときのサイズ(高さ) }, { duration: 50, // 小さくするときにかかる時間(ms) complete: function() { $(this).animate( { width: '175px', // 大きくしたときのサイズ(幅) height: '220px' // 大きくしたときのサイズ(高さ) }, { duration: 100, // 大きくしたときかかる時間(ms) complete: function() { $(this).animate( { width: '150px', // 元のサイズ(幅) height: '165px' // 元のサイズ(高さ) }, { duration: 100 // 元のサイズに戻るときにかかる時間(ms) }); } }); } }); }); });