jquery.imagecube.jsを使って、複数画像を組合せてサイコロの様に回転表示する方法をご紹介します。
Contents
複数画像を組合せてサイコロの様に回転表示するCSSの記述
※サイコロの様に回転表示するエリア(#idCube)と画像のCSSです。必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:1.6em; text-align:center; padding:15px 0; } #idWrap{ width:700px; margin:0 auto; text-align:center; } #idCube{ width:300px; height:300px; margin:0 auto; } a img{ border: none; } #linksCube img{ width: 100%; height: 100%; } --> </style>
jquery.imagecube.jsを使って、複数画像を組合せてサイコロの様に回転表示するJavaScriptの記述
※jquery.min.js、jquery.imagecube.js、jquery.easing.1.3.jsファイルを読み込みます。$(“サイコロの様に回転表示エリア”).imagecube({オプション})でサイコロの様に回転表示エリアに対して回転方向オプション等を設定します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.imagecube.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#idCube").imagecube({randomSelection:['up', 'down', 'left', 'right']}); }); </script>
複数画像を組合せてサイコロの様に回転表示するHTMLの記述
※サイコロの様に回転表示するエリア(id=”idCube”)と画像を6枚用意しました。必要に応じて変更して下さい。
<div id="idWrap"> <h1>複数の1枚画像をサイコロの様に回転して表示します</h1> <div id="idCube"> <img src="images/i1.jpg" width="300" alt="" /> <img src="images/i2.jpg" width="300" alt="" /> <img src="images/i3.jpg" width="300" alt="" /> <img src="images/i4.jpg" width="300" alt="" /> <img src="images/i5.jpg" width="300" alt="" /> <img src="images/i6.jpg" width="300" alt="" /> </div><!--/idCube--> </div><!--/idWrap-->
jquery.imagecube:複数画像をサイコロの様に回転表示するデモページ
jquery.imagecube:複数画像をサイコロの様に回転表示するデモページ
ソース元:jQuery Image Cube
ソース元:jQuery Image Cube
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告