トップページのjQuery

このサイトには入り口が2カ所ある。一つはドック型jQueryで装飾した画面（画像をクリック）

メニューがドックタイプの標準top画面

 
<link href="jquery-ui/dock/base.css" rel="stylesheet" type="text/css" />
<script src="jquery-ui/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/dock/jquery.jqDock.min.js" type="text/javascript"></script>
<script type='text/javascript'>
<!--
$(function() {
      $('div#menu2').jqDock({
        align: 'left',
        size: 70,
        distance: 60,
        labels: '',
        duration: 500,
        source: false
      });
    });
</script>
 

もうひとつはキューブ型でくるくる画面が回るロゴタイプ（画像をクリック）

ロゴがキューブするイラスト専用画面

このタイプで各々にリンクを張ろうとしたのだが、aリンクを設定すると画像がうまく表示されなくなってしまう。またこの2つを同じページに表示させようとしたのだがscriptが干渉（多分）してしまって機能しなかった。読む順番を変えたりしたのだが…簡単にはいかないので時間がある時にソースうをじっくり調べてみたい〜この辺はflashの方が有利。ちなみに両方とも30秒後に別ページに自動で飛びます。

 
<script src="http://tsukapiko.minibird.jp/templates/tsukapiko/scripts2/jquery-1.4.2.min.js" 
type="text/javascript"></script>
<script src="http://tsukapiko.minibird.jp/templates/tsukapiko/scripts2/jquery.imagecube.js" 
type="text/javascript"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#fadein').fadeIn(2000);
  });
</script>
<script type="text/javascript">// <![CDATA[
 
   jQuery(function() {  
 
     jQuery('#defaultCube').imagecube();  
 
     jQuery('#stopCube').toggle(function() {  
         jQuery(this).text('Start');  
        jQuery('#defaultCube').imagecube('stop');  
       }, function() {  
         jQuery(this).text('Stop');  
         jQuery('#defaultCube').imagecube('start');  
       }  
     );  
 
    jQuery('#removeCube').toggle(function() {  
         jQuery(this).text('Re-attach');  
         jQuery('#defaultCube').imagecube('destroy');  
       },  
       function() {  
         jQuery(this).text('Remove');  
         jQuery('#defaultCube').imagecube();  
       }  
     );   
  });  
// ]]></script>
 

●jQueryアコーディオン仕様

前ページのサンプル→http://www.tsuka-time.com/golf.html

このスクリプトはページ数が増えても、コンパクトに収まる為効果バツグンです。iphoneでもサクサク動く（嬉）但しファイル数は変わらないので当たり前に容量 は食いますね。これは、自分のＨＰのメインカラーであるSouth-streetを使いました。
jQuery UIのテーマギャラリーのダウンロード

ツイート