.NET 開発基盤部会 Wiki

目次 †

↑

概要 †

SaaS開発で調べたJavaScriptについてのメモ。

↑

jQuery †

↑

エフェクト †

↑

効果音 †

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>
↑

アニメーション †

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）
            });
          }
        });
      }
    });
  });
});
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS