tsukalogo0000

alt

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

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

<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スクリプト記述終了-->
 

 

コメントを追加

お名前:
メールアドレス:
Webサイト:
件名:
コメント: