Javascript rotator について。

解決済

質問者：buzinesswa
質問日時：2010/08/30 02:46
回答数：3件

Javascript rotator について。

こんばんは。
Javascriptについてソースを拝見してもわからなく
行き詰ってしまったのでこちらで質問させて頂きました。

この度、下記のJavaを使用してホームページを作成したく思っております。
【説明】http://www.skuare.net/test/j3DRotator_1.html
【デモ】http://www.skuare.net/test/j3DRotator.html

が、そこで一つお尋ねしたいのですが
テキストには遠近感がついていますが画像には遠近感が全くありません。
画像にも手前は大きく、奥に行けば小さくなるアクションを付ける場合は
どの様に改善すれば宜しいのでしょうか？

また、参考になるサイトでもあれば良いのですが・・・(涙

初歩的な質問だとは思いますが
何卒、ご教授宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： yyr446
回答日時：2010/09/01 17:28

まわせ！まわせ！実験報告

Ｎｏ.１様の回答　+　Ｎｏ.２様の回答　で、画像も伸びちじみ、
オパシティはまあいいか。

　if(p.element.getElementsByTagName("img").length>0)
　　p.element.getElementsByTagName("img")[0].style.width = scale - (zz * 300 |0) + '%';

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2010/08/30 16:10

まわせ！まわせ～！むずかしいざひょうけいはむししてるけど・・・

すべてのぜんかくくうはくは、はんかくにしてちょ！
<!DOCTYPE html>
<title></title>
<style type="text/css">
#box {
　width : 800px;
　height : 800px;
　background-color: black;
　list-style :none;
　margin: 0;
　padding: 0;
}
#box li {
　color : #fff;
}
</style>
<body>
<ul id="box">
<li>1
<li>2
<li>3
<li>4
<li>5
<li>6
<li>7
<li>8
<li>9
</ul>

<script>
(function ( ) {
　var node = document.getElementById ('box');
　var lis = node.getElementsByTagName ('li');
　var cnt, li;
　var parts = [ ];
　var cx = node.offsetWidth / 2;
　var cy = node.offsetHeight / 2;
　var r = 300;
　var n = 360 / lis.length;
　var xr = 3;
　var yr = 1;
　var zr = .5;
　var deg = Math.PI / 180;
　var depth = 1000;
　var scale = 700;
　
　node.style.position = 'relative';
　node.style.overflow = 'hidden';

　// ざひょうのていぎ
　for (cnt = 0; li = lis[cnt]; cnt++) {
　　li.style.position = 'absolute';
　　parts.push ( {
　　　'element' : li,
　　　'x' : Math.sin (n * cnt * deg) * r,
　　　'y' : 0,
　　　'z' : Math.cos (n * cnt * deg) * r,
　　　'alpha' : 1,
　　　'scale' : 1
　　});
　}
　
　(function ( ) {
　　var x, y, z, mx, my, mz, p, t, xx, yy, zz, s, ss;
　　for (cnt = 0; p = parts[cnt++]; ) {
　　　x = p.x, y = p.y, z = p.z, s = p.element.style;

　　　if (xr) { //ｘ軸の回転
　　　　t = xr * deg;
　　　　my = y * Math.cos (t) - z * Math.sin (t);
　　　　mz = y * Math.sin (t) + z * Math.cos (t);
　　　　y = my, z = mz;
　　　}
　　　
　　　if (yr) {
　　　　t = yr * deg;
　　　　mx = x * Math.cos (t) - z * Math.sin (t);
　　　　mz = x * Math.sin (t) + z * Math.cos (t);
　　　　x = mx, z = mz;
　　　}

　　　if (zr) {
　　　　t = zr * deg;
　　　　mx = x * Math.cos (t) - y * Math.sin (t);
　　　　my = x * Math.sin (t) + y * Math.cos (t);
　　　　x = mx, y = my;
　　　}
　　　
　　　zz = (z + depth) / scale;
　　　xx = (cx + x / zz) |0;
　　　yy = (cy + y / zz) |0;
　　　
　　　s.top = yy + 'px';
　　　s.left = xx + 'px';
　　　s.fontSize = scale - (zz * 300 |0) + '%';
　　　
　　　p.x = x, p.y = y, p.z = z;

　　}
　　
　　setTimeout (arguments.callee, 30);
　})();

})();

</script>

- 0
- 件

通報する

No.1ベストアンサー

回答者： fujillin
回答日時：2010/08/30 10:20

ざっと見ただけですが…

$.fn.rotate の終わりのほうの
　this[i].style.top = -Y + "px";
　this[i].style.left = X + "px";
　this[i].style.fontSize = size + "em";
　this[i].style.opacity = (size*10)/5;
　this[i].style.zIndex = elem[i].dist;
の部分で、各要素の位置やサイズを指定しているみたいです。
サイズに関してはfontSizeを指定しているだけなので、単純には画像のサイズは変わらないということになっているみたい。

オリジナルのデモは文字のみなので、画像までは考慮して作成していないのかも。
　http://www.willjessup.com/sandbox/jquery/rotator …
…かと思ったら、最初に作成したものはこんな感じらしい。
　http://www.willjessup.com/sandbox/jquery/solar_s …
（画像のサイズもちゃんと変わっていますね）

この（↑）HTMLソースのように、画像のサイズ指定をemで指定しておけば、fontSizeの指定がそのまま画像サイズに反映されるということみたいですね。