UPDATE 2010年1月26日
マウスオーバーにアニメーションを加えるAnimated Hover
jQueryプラグインのAnimated Hoverは、マウスオーバーした時にちょっとしたアニメーションを加えてくれます。このブログのタグクラウドの部分に導入してみました。ちょっとしたくすぐりにはなるかも。
<head>部
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.dimensions.min.js"></script> <script type="text/javascript" src="js/jquery.ahover.js"></script> <script type="text/javascript"> jQuery(function($) { $('.widget_tag_cloud a').ahover({toggleEffect: 'height', moveSpeed: 75, toggleSpeed: 100}); }); </script>
CSS
.widget_tag_cloud { position: relative; padding: 1px 0 1px 0;/*IEでの表示崩れ回避用。なんだこれ。*/ } .widget_tag_cloud a { position: relative; z-index: 200; } .widget_tag_cloud a:hover { color: #ffffff; } .widget_tag_cloud .ahover { position: absolute; background: #027BD5; padding: 0 0 5px 0; border: 2px solid #027BD5; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
CATEGORY javascript COMMENT (0)
コメントを投稿