« 60年前の印刷会社の風景 | トップページ | ありえない場所でボードゲーム »

2008/11/30

jQueryでリンクを左右に動かす方法

ブックマークに追加する
jQueryでリンクを左右に動かす、いわゆるNudge効果を作る方法が紹介されていた。

リンク:david walsh blog

何の役に立つかはよくわからないが、エントリ中でリンクを目立たせることができる。


サンプル1:Google
サンプル2:Yahoo! Japan
サンプル3:MSN Japan
サンプル4:Ask.jp

上記のサンプルのリンクにマウスカーソルを近づけると、リンクの文字が左右に揺れる。

って、それだけ...


なお、手順は、簡単で、

1) jQueryをheadタグの中に含めておく。
<script type="text/javascript" src="jquery-1.2.6.js"></script>
# jQueryの本体はアップロードした先を示すように適宜修正要

2) 以下のJavaScriptを同じく、headタグに含めておく。
<script type="text/javascript">
$(document).ready(function() {
	$('a.nudge').hover(function() { //mouse in
		$(this).animate({ paddingLeft: '20px' },400);
	}, function() { //mouse out
		$(this).animate({ paddingLeft: 0 }, 400);
	});
});
</script>
# このエントリでは、bodyタグの中に置いているが、それは単なる手抜き。
この手抜きによって、この効果はページのローディングが全て完了しないと使えなかったり...

3) 動かしたいリンクのaタグ中に"nudge"というクラス名を含めておく
<a href="..." class="nudge">.....</a>


これは、普通のエントリで使うよりも広告用リンクで使った方が注目されるかもしれない。

●お探し物は見つかりましたか?まだの方は以下の検索をご利用下さい。
 
当ブログ内 (within this blog) Web
●当ブログのRSSフィードをお手持ちのRSSリーダーにご登録いただくと、エントリ追加時のみ更新通知が届くため、確認の手間が省けます。よろしければ、どうぞ。
当ブログのRSSフィード
●当ブログの更新情報+α(deliciousのブックマーク他)はTwitter経由でも確認できます。是非フォローしてください。(実はRSSフィードよりも更新が早かったりします)

|

Ajax」カテゴリの記事

blog comments powered by Disqus


●Google広告


●その他の広告



トラックバック

この記事のトラックバックURL:

●トラックバックされる方へのご注意
本文中でこのエントリのアドレスを引用してください。引用(言及リンク)がない場合はスパム(迷惑行為)として削除します。
なお、迷惑行為かどうかを人力で判定しているため、トラックバックが反映されるまでに少々、お時間を頂いています。
For foreigners: If you would like to trackback to this entry, please include permlink of this entry in your entry. If your entry doesn't include this permlink, I will delete your trackback as spam.

この記事へのトラックバック一覧です: jQueryでリンクを左右に動かす方法:

 
Google