記事の詳細
JavaScriptとjQueryだけで動きのあるボタンを作成する
ここ数日の夕飯の摂取カロリーが気になっています、網干です。
というのも、ここ数日はベーコン、ジャガイモ、チーズをフライパンで焼いたものを毎晩のように食べているので、カロリーが高すぎるのではないかと気になっています…。
ですが、お手軽にできて非常に美味しいのです!やめられません!
ということで、本記事の最後にレシピと作り方を載せておきます、お楽しみに!
さて、今回はJavaScriptとjQueryだけで、下記のようなマウスが乗ったときに回転するボタンを作成する方法を記載します。
button1button2
具体的には、下記のように設定をしていきます。
では、早速コードを書いていきましょう!
今回のブログの見出しはコチラです!
変数を使ってjQueryでボタンのスタイルを設定する
ボタンのスタイルは下記のように変数の中に記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ボタンのスタイル var btnStyle = { "margin": "0 10px", "padding": "15px 0", "width": "150px", "color": "#000", "font-weight": "bold", "text-align": "center", "display": "inline-block", "overflow": "hidden", "background-color": "#cfcfcf", "border": "#999 1px solid", "border-radius": "5px", "transition": "all 1s ease-in-out", "text-decoration": "none" }; |
上記の変数を使用して、下記のように”button1″と”button2″のクラスのスタイルに設定します。
1 2 |
// ボタンのスタイルを設定 jQuery('.button1, .button2').css(btnStyle); |
これで”button1″と”button2″のクラスに対してスタイルを適用することができます。
では次に、ボタンを回転させる設定をしましょう。
回転を行うCSSの設定をjQueryで追加/削除する
下記のように指定して、ボタン回転動作の追加/削除を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// ボタン縦回転 jQuery('.button1').hover( function() { jQuery(this).css('transform', 'rotateX(360deg)'); }, function() { jQuery(this).css('transform', 'none'); }); // ボタン横回転 jQuery('.button2').hover(function() { jQuery(this).css('transform', 'rotateY(360deg)'); }, function() { jQuery(this).css('transform', 'none'); }); |
jQueryを使用したhoverの設定は「マウスカーソルが要素に入ったとき」と「マウスカーソルが要素から出たとき」の設定ができるため、上記のように設定します。
もしも「マウスカーソルが要素に入ったとき」だけに設定してしまうと、引き続き設定が維持されてしまうため回転は一回限りとなってしまいます。
参考記事:http://semooh.jp/jquery/api/events/hover/over,+out/
上記の設定で下記のようなマウスが乗ったときに回転するボタンをJavaScriptとjQueryのみで作成することができます。
回転するボタンを設置できましたね!
スタイルを設定している変数の記述がスタイルシートに記述する様式と近いので、JavaScriptを知らない方でもカスタマイズできそうです。
では、最後に上記プログラムの一式を記載します。
まとめ(回転ボタンの設置とスクリプトの記述)
今回紹介したプログラムの一式は下記になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<a href="#" class="RotateButtonX">button1</a><a href="#" class="RotateButtonY">button2</a> <script> <!-- // ボタンのスタイル var btnStyle = { "margin": "0 10px", "padding": "15px 0", "width": "150px", "color": "#000", "font-weight": "bold", "text-align": "center", "display": "inline-block", "overflow": "hidden", "background-color": "#cfcfcf", "border": "#999 1px solid", "border-radius": "5px", "transition": "all 1s ease-in-out", "text-decoration": "none" }; // ボタンのスタイルを設定 jQuery('.RotateButtonX, .RotateButtonY').css(btnStyle); // ボタン縦回転 jQuery('.RotateButtonX').hover( function() { jQuery(this).css('transform', 'rotateX(360deg)'); }, function() { jQuery(this).css('transform', 'none'); }); // ボタン横回転 jQuery('.RotateButtonY').hover(function() { jQuery(this).css('transform', 'rotateY(360deg)'); }, function() { jQuery(this).css('transform', 'none'); }); --> </script> |
上記のプログラムで注意してほしいのは、アンカータグの前にスクリプトを記述してはいけないことです。
アンカータグの前にスクリプトを記述してしまうと、アンカータグのクラスに対してスタイルの設定をすることができません。
これはスクリプトの実行タイミングの仕様に関係するので、もっと詳しく知りたい方は下記の記事を参考にしてください。
参考記事:http://qiita.com/tomcky/items/07190a3a2d0d993d1b56
動きのあるボタンの一覧リストをjsファイルにまとめてしまうことも可能!
今回のプログラムから、jsファイルだけでボタンのスタイル設定が可能であることがわかりました。
ということは、ホームページ制作で汎用的に使うボタンやメニューは、jsファイルにまとめてしまうことができるということになります。
上記の素晴らしいところは、事前にjsファイルでテンプレをいくつか作っておいてしまえば、プログラムの知識がない人でもファイルの読み込みさえできてしまえばJavaScriptを使用した動きのあるボタンやメニューが作れてしまうところですね!
今までは各ホームページに対して行っていた作業を、ファイルの読み込みだけで済ませてしまえるのであれば、作業時間をぐっと短縮することができる………可能性を秘めていると思います!
取得した知識を簡単に再利用することができて、かつ他の作業者に展開できるのは非常に魅力的です。
こういったライブラリのようなものをどんどん増やして、作業の負担を減らすのはプログラマの重要なお仕事の一つですね。
最後に、冒頭で話題に出していたじゃがいもとベーコンとチーズの炒め物(?)のレシピを載せます!
<材料>
- ジャガイモ:1個
- ペーコン:3~4枚
- チーズ:お好みで
<作り方>
- ジャガイモの皮をむいて火が通りやすいサイズに薄切り
- ジャガイモを加熱用の器に入れて、ラップで蓋をして電子レンジ(500W)で2分~3分加熱
- フライパンに薄く油をひいてベーコン、加熱したジャガイモ、チーズの順に乗せる
- フライパンに蓋をしてチーズが溶けるまで弱火~中火で加熱する
- 完成!
辛い物が好きな方はタバスコをかけると更においしくなりますよ!
是非、お試しください!
ではまた!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。