jQueryで作るマウスに追随するツールチップ
ツールチップは、案外簡単に実現することが出来ました! HTML・CSSソース a要素にtooltipクラスを付け、表示させる内容をspan要素のtooltipContクラスに記述します。 CSSソースはtooltipContクラスの「display:none」「position:absolute」と「z-index」が必須で、表示の装飾は任意で行って下さい。 <a class="...続きを読む
ツールチップは、案外簡単に実現することが出来ました! HTML・CSSソース a要素にtooltipクラスを付け、表示させる内容をspan要素のtooltipContクラスに記述します。 CSSソースはtooltipContクラスの「display:none」「position:absolute」と「z-index」が必須で、表示の装飾は任意で行って下さい。 <a class="...続きを読む
jQueryのanimateを使って、簡単な画像拡大の動きの検証をしてみます。 3つの動作 animateを指定する際に、stop()を指定することで、動きを制御出来ます。 .animateのみ stop()を記述しない場合は命令の実行の回数分、動作します。 例えば、連続してマウスオーバーすると回数分命令が実行されます。 stop().animate stop()を記述すると、命令が実行中に他の...続きを読む
グローバルメニューでよく使われるドロップダウンメニューですが、 jQueryのanimateを使って動きに装飾を加えます。 HTMLソース <ul id="mainNav"> <li><a href="">Adobe</a> <ul class="subNav"> ...続きを読む
jQueryを使用して、2種類のアコーディオンを作成します。 2種類といっても、動作が少し違うだけです。。。 HTMLとCSS <dl> <dt>1.タイトル</dt> <dd>サンプルテキストサンプルテキストサンプルテキスト</dd> <dt>2.タイトル</dt> <dd>サンプルテキス...続きを読む
jQueryでフォーム改善:入力カウントの感知 前回と前々回に紹介しました入力のカウントですが、 今回はフォームで最後の段階、submitした際の動作を設定します。 HTMLソース <form> <textarea type="text" id="input-up"></textarea><strong>...続きを読む