jQueryを使って立方体の面の画像が回りながら切替わるように見せる – JavaScript Archives（ジャバスクリプトアーカイブス）

taka_oj

2016年3月25日

| コメントはまだありません

| JavaScript

サイコロの目の画像が回りながら変わっていくような切替をjQueryを使って試してみました。

画像をクリックすると画像が回りはじめ後の画像が現れます。
今回使用したのはランダムな回転です。
他にもいろいろあるので、試しみてくださいね。

今回使用したのは、jQuery Image Cubeです。

まず、はじめに、以下のプラグインをダウンロードしましょう。

今回使用したのは、プラグイン名:imagecube 作者:Keith Wood

<pre class="lang:js decode:true " title="JavaScript" >
<script type="text/javascript" src="jquery.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">//<![CDATA[
  $(document).ready(function(){
      $("#sample").imagecube({randomSelection:['up', 'down', 'left', 'right']});
  });
//]]></script>

</pre>

<pre class="lang:css decode:true " title="CSS" >
<style type="text/css">
#sample { 
  width: 200px;
  height: 200px;
  margin: 50px;
 }
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }		 
</style>
</pre>

<pre class="lang:xhtml decode:true " title="XHTML" >
<div id="sample">
<img src="sam_1.gif" width="200" height="200"/>
<img src="sam_2.gif" alt="01" title="#"/>
<img src="sam_3.gif" alt="01" title="#"/>






<img src="sam_4.gif" alt="01" title="#"/>
</div>
</pre>