Carpe Diem

  Top > スポンサー広告> JavaScript > 画像を3D回転で表示させる  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像を3D回転で表示させる

2012 - 09/11 [Tue] - 16:35

画像を3D回転させられるjQueryプラグイン「Professor Cloud」の使用方法です。
まずは公式ページで体験してみてください。

cloudcarousel.png

Cloud Carousel - Professor Cloud

別のプラグインを使えば、デモのようにマウスホイールでグルグル回すこともできます。

◆必要な .js ファイル
jquery-1.x.x.min.js
cloud-carousel.1.0.x.js
jquery-mousewheel.js //マウスホイールでグルグル回す場合

各ファイルをダウンロードしたら適当なフォルダに置いてください。


◆サンプルソース

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.x.js"></script>

<script>
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 128,
yPos: 32,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
mouseWheel: true,
bringToFront: true,
reflHeight: 50,

}
);
});

</script>

</head>
<body>
<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;"> <!-- You can place links around these images -->
<img class = "cloudcarousel" src="/images/carousel/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
<img class = "cloudcarousel" src="/images/carousel/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
<img class = "cloudcarousel" src="/images/carousel/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
<img class = "cloudcarousel" src="/images/carousel/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
</div>


<!-- Define left and right buttons. -->
<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />

<!-- Define elements to accept the alt and title text from the images. -->
<p id="title-text"></p>
<p id="alt-text"></p>
</body>
</html>


主に編集するのはピンク色の部分です。.js ファイルの指定と、scriptタグのところで動作を指定し、divタグのところに画像を入れていきます。
詳しいオプションは公式サイトのインストラクションに載っています。
上記のサンプルでは、公式サイトの状態に

・マウスホイールでグルグル回せる
・画像クリックしたら正面に持ってくる
・リフレクション(下部に反射してる)効果

を実装しています。


◆注意点
ハマった点をいくつか。

・.js ファイルをしているするとき、jQueryの位置は最初に

cloud carouselはjQueryプラグインなので、当然ながらjQueryを先にロードしないと足りないメソッドだらけでエラーになります。


・最新のjQuery ファイルだと、リフレクションが使えない
このリフレクションにはcanvas要素を使用しているのですが、最新のjQueryだと(現在v1.8.1)canvasの扱いを少しいじっているみたいです。サンプルソースのような1.4.2だと問題なく動作しました。



ソース:
Cloud Carousel - Professor Cloud
3Dな感じで画像を回せるjQueryプラグイン「Professor Cloud」

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。