トップページのjQueryこのサイトには入り口が2カ所ある。一つはドック型jQueryで装飾した画面(画像をクリック)<script src="jquery-ui/scripts/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script> <script src="jquery-ui/dock/jquery.jqDock.min.js" type="text/javascript"><!--mce:1--></script> <script type="text/javascript"><!--mce:2--></script> もうひとつはキューブ型でくるくる画面が回るロゴタイプ(画像をクリック) このタイプで各々にリンクを張ろうとしたのだが、aリンクを設定すると画像がうまく表示されなくなってしまう。またこの2つを同じページに表示させようとしたのだがscriptが干渉(多分)してしまって機能しなかった。読む順番を変えたりしたのだが…簡単にはいかないので時間がある時にソースうをじっくり調べてみたい〜この辺はflashの方が有利。ちなみに両方とも30秒後に別ページに自動で飛びます。 最後はメインの画像が3Dでスクロールするタイプ(画像をクリック) 写真一つ一つが関連した記事にリンクしていて説明文としてはツールチップを使用。 <!-- CSS記述 --> body { font-family: Arial, "MS Trebuchet", sans-serif; background-color: #fff; } #list { margin:0 auto; height:600px; width:520px; overflow:hidden; position:relative; background-color: #fff; } #list ul, #list li { list-style:none; margin:0; padding:0; } #list a { position:absolute; text-decoration: none; color:#666; } #list a:hover { color:#ccc; } <!--CSS記述終了--> <!--jsスクリプト記述--> $(document).ready(function(){ var element = $('#list a');; var offset = 0; var stepping = 0.03; var list = $('#list'); var $list = $(list) $list.mousemove(function(e){ var topOfList = $list.eq(0).offset().top var listHeight = $list.height() stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1; }); for (var i = element.length - 1; i >= 0; i--) { element[i].elemAngle = i * Math.PI * 2 / element.length; } setInterval(render, 100);<!--スピード通常160--> function render(){ for (var i = element.length - 1; i >= 0; i--){ var angle = element[i].elemAngle + offset; x = 120 + Math.sin(angle) * 50;<!--円の広がり通常正方形だと30--> y = 35 + Math.cos(angle) * 30;<!--円の縦の広がり通常30--> size = Math.round(40 - Math.sin(angle) * 40);<!--透明度の階層調整--> var elementCenter = $(element[i]).width() / 2;<!--左右のセンター位置--> var leftValue = (($list.width()/2) * x / 120 - elementCenter) + "px"<!--左右の位置通常100--> $(element[i]).css("fontSize", size + "pt"); $(element[i]).css("opacity",size/50); <!--透明度--> $(element[i]).css("zIndex" ,size); $(element[i]).css("left" ,leftValue); $(element[i]).css("top", y + "%"); } offset += stepping; } }); <!--jsスクリプト記述終了-->
|