jQuery plugin: “jquery.bren.rollover”

brenサイトのグローバルナビゲーションで使用しております、

jquery.bren.rollover

を公開いたします。


機能:



マウスオーバーで画像が

  • フェードイン(オフでフェードアウト)
  • 縦方向にスライドイン(オフでスライドアウト)
  • 横方向にスライドイン(オフでスライドアウト)
  • jQueryのeasingにも対応

となります。 サンプルコードは次の通りです。


HTMLサンプル:


<script type="text/javascript" src="/js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/js/jquery.bren.rollover.js"></script>
<script type="text/javascript">
  $(function() {
    $('#hdr-navi a').bren_rollover({
      width     : false,            // 横方向アニメーション無し
      height    : true,             // 縦方向アニメーション有り
      opacity   : true,             // フェードイン有り
      easing    : 'easeOutCirc',    // 最初速く、最後ゆっくり
      speed     : 500               // アニメーション速度500msec
    });
  });
</script>


CSSサンプル:


/* ベースのアンカー記述 */
#tnavi li.n1 a {
	width: 121px;
	height: 40px;
	background: url(/images/ttlbar.png) no-repeat;
	background-position: -6px -98px;
}

/* Javascript無効時用記述 */
#tnavi li.n1 a:hover.hover-css {
	background-position: -6px -242px;
}

/* ホバー用記述 */
#tnavi li.n1 a .hover-js {
	width: 121px;
	height: 40px;
	background: url(/images/ttlbar.png) no-repeat;
	background-position: -6px -242px;
}





ダウンロードはこちらから


jquery.bren.rollover.js

コメントする