jQuery の jqDock プラグインで作る Mac OS X 風ドックメニューは、duration オプションを設定することにより、メニュー画像を、最初に拡大するときと、最後に縮小するときに費やす時間を、ミリ秒(ms)単位で指定できる。
初期設定値は、「300」。
jqDock プラグインの入手方法などについては、こちら。
実装例(サンプル)
300(デフォルト)
100
500
1000
3000
実装例(サンプル)の動作について
100 を指定した実装例(サンプル)は、最初の拡大と最後の縮小に、0.1秒掛かる。1000 を指定した実装例(サンプル)は、最初の拡大と最後の縮小に、1秒掛かる。
実装例(サンプル)のソースコード
読み込み
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery/plugin/jqDock/jquery.jqDock.js"></script>
<script type="text/javascript" src="jquery/plugin/jqDock/jquery.jqDock.js"></script>
jquery.js と jquery.jqDock.js を読み込む。
ファイルへのパスは、それぞれ、アップロードした場所を指定する。
JavaScript
<script type="text/javascript">
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
duration: '300'
}
);
});
// -->
</script>
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
duration: '300'
}
);
});
// -->
</script>
300 の数値の部分が、最初の拡大と最後の縮小に掛ける時間。この数値を、500 や 1000 などに変更することで、最初の拡大と最後の縮小に掛ける時間を調整できる。ミリ秒(ms)単位であることに注意。
CSS
<style type="text/css">
<!--
div#jquery-plugin-jqDock {
margin-top: 35px;
}
-->
</style>
<!--
div#jquery-plugin-jqDock {
margin-top: 35px;
}
-->
</style>
重ならないように、マージンを入れたが、重なっても構わない場合は、マージンを指定する必要はない。
HTML
<div id="jquery-plugin-jqDock">
<a href="#"><img src="img/jqDock_home_70.png" title="home" alt="home" /></a>
<a href="#"><img src="img/jqDock_blog_70.png" title="blog" alt="blog" /></a>
<a href="#"><img src="img/jqDock_about_70.png" title="about" alt="about" /></a>
<a href="#"><img src="img/jqDock_mail_70.png" title="mail" alt="mail" /></a>
<a href="#"><img src="img/jqDock_bbs_70.png" title="bbs" alt="bbs" /></a>
<a href="#"><img src="img/jqDock_link_70.png" title="link" alt="link" /></a>
</div>
<a href="#"><img src="img/jqDock_home_70.png" title="home" alt="home" /></a>
<a href="#"><img src="img/jqDock_blog_70.png" title="blog" alt="blog" /></a>
<a href="#"><img src="img/jqDock_about_70.png" title="about" alt="about" /></a>
<a href="#"><img src="img/jqDock_mail_70.png" title="mail" alt="mail" /></a>
<a href="#"><img src="img/jqDock_bbs_70.png" title="bbs" alt="bbs" /></a>
<a href="#"><img src="img/jqDock_link_70.png" title="link" alt="link" /></a>
</div>
画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。