画像を衛星みたいに３D回転させる/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mootools 3D Carousel</title>


<style>

	body{background:#000}
	#carousel{
		background-color:#000000;
		width:700px;
		height:400px;
		position:relative;
		border:1px solid #FFFFFF;
		
	}
	
	img{
		width:100%;
		height:auto;
		border:0px solid #FFFFFF;
		display:block;
	}
	
</style>

<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/3dcarousel.js" type="text/javascript"></script>

</head>

<body>


<div id="carousel">
	<div><a href="#"><img src="images/Mac-blue-flowers-64.png" /></a></div>
	
	<div><a href="#"><img src="images/Mac-cow-64.png" /></a></div>
	
	<div><a href="#"><img src="images/Mac-lightblue-64.png" /></a></div>
	
	<div><a href="#"><img src="images/Mac-love-64.png" /></a></div>
	
	<div><a href="#"><img src="images/Mac-vintage-64.png" /></a></div>
	
	<div><a href="#"><img src="images/Mac-white-64.png" /></a></div>
</div>
<a href="http://www.iconspedia.com/icon/mac-red-green--8-8.html" target="_blank">http://www.iconspedia.com/icon/mac-red-green--8-8.html</a>
</body>
</html>

	Hot Ajax

画像を衛星のようにクルクルと回転させるスクリプト 3dcarousel.js。
mootools.js を使用します。
リンクも設置できるので、一風変わったメニューとしても使えるかもしれません。

セッティング

１．ダウンロード/セッティング

サイトへ行き、3d-carousel.zip をダウンロードしてください。
解凍したら jsフォルダをアップロード。

２．<head>設定

アップしたスクリプトを読み込ませます。

順番とパスに注意して読み込ませてください。

３．HTMLマークアップ

まず枠を作ります。

それからその中に画像を<div>で囲んで入れていきます。

<div id="carousel">
    <div><a href="#"><img src="images/Mac-blue-flowers-64.png" /></a></div>
    <div><a href="#"><img src="images/Mac-cow-64.png" /></a></div>
    <div><a href="#"><img src="images/Mac-lightblue-64.png" /></a></div>
    <div><a href="#"><img src="images/Mac-love-64.png" /></a></div>
    <div><a href="#"><img src="images/Mac-vintage-64.png" /></a></div>
    <div><a href="#"><img src="images/Mac-white-64.png" /></a></div>
</div> <div>で囲むことを忘れずに。
これだけでOKです。