skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

3Dでぐるぐる回るjavascript「jquery 3d rotator」

｜ ｜ ｜ ｜ ｜ ｜ ｜

実用性はあまりないかもしれませんが、リンクが3Dで面白い動きをするjquery 3d rotatorです。
商品画像にリンクを張ることで回転式の陳列が可能になるかもしれません。

使用方法
jquery 3d rotatorからrotator.jsをjQueryからjquery.jsをダウンロードします。
＊配布先サイトのスクリプトでは、hrefで位置を指定しているのでリンク先にいきません。
　当サイトではtitle属性に変更していますので、以下からダウンロードしてください。
　rotator.js
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/rotator.js" type="text/javascript"></script>
<style type="text/css">
html {overflow: hidden;}
body {background: #222;width:100%;height:100%;margin:0px;padding:0px;}
#x_axis {border:1px solid #555;width:100%;height:1px;position:absolute;top:50%;}
#y_axis {height:100%;width:1px;position:absolute;left:50%;}
#y_axis_line {border:1px solid #555;height:100%;width:1px;position:absolute;left:50%;top:0px;}
#links a {padding:0px;margin:0px;z-index:100;position:absolute;left:0px;top:0px;width:100%;height:100%;}
a {text-decoration: none;color:#fff;}
a:hover {text-decoration: none;background:#ff8000;color:#fff;}
a:visited {text-decoration: none;color:#fff;}
a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;}
img {border:none;}
</style>
上記を記述し、回転させたいリンクを以下のように書き込みます。
<div id="y_axis_line"></div>
<div id="x_axis">
<div id="y_axis">
<div id="links">
<a href="" title="x=-340&y=240&z=-161">テキスト</a>
</div>
</div>
</div>
上記のtitleで初期位置をx軸、y軸、z軸を±360で指定します。
テキストと表記した場所は画像でもOKです。
3Dでぐるぐる回るjavascript「jquery 3d rotator」サンプル
＊当サイトのタグも試しにやっています（重め）。
　Movable Typeから自動でタグを書き出し、titleにランダムで数字を挿入しています。
　タグ一覧

記事作成：2007年11月21日

前の記事：アップロードファイル複数指定できるjavascript「Multiple File Upload plugin for jQuery」
次の記事：jQueryベースのグラフ作成javascript「Chart Plugin」