JavaScript + Ajax 実践サンプル集 - ImageCubeプラグインでイメージを3Dで回転させる

ImageCubeプラグインでイメージを3Dで回転させる

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのImageCubeプラグインを利用して今月のオススメスイーツを3Dで回転させます。サンプルが表示されたら下の方にスクロールして「今月のオススメスイーツ」を表示します。左右に表示されているスイーツが上下左右に回転します。

このサンプルを編集して試してみる

このサンプルは、共著 JavaScriptプログラマのためのWebデザイン入門に掲載されています。このサンプルの解説とソースコードは、本書を参照してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta http-equiv="Content-Style-Type" content="text/css" /> 
	<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
	<title>Miki Sweets</title>
  <link href="jQuery/sweetsImageCube/css/import.css" rel="stylesheet" type="text/css" />
	
	
  <style type="text/css">
    a img { border: none; }
	  #mainInner {height: 200px;}
    #leftCube { float: left; width: 200px; height: 150px; margin: 20px 0 0 150px;}
    #leftCube img { width: 100%; height: 100%; }
    #rightCube { float: right; width: 200px; height: 150px; margin: 20px 150px 0 0;}
    #rightCube img { width: 100%; height: 100%; }    
  </style>

</div>
		</div>
		<div id="footer">
			<p>Copyright(c) Miki Sweets 2011 All Rights Reserved.</p>
		</div>
	</div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

ImageCubeプラグインでイメージを3Dで回転させる

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

ImageCubeプラグインでイメージを3Dで回転させる

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!