自分のお店を開く時の心構えとは? >>

Javascript rotator について。

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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

ざっと見ただけですが…



$.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の指定がそのまま画像サイズに反映されるということみたいですね。
    • good
    • 0

まわせ!まわせ!実験報告



No.1様の回答 + No.2様の回答 で、画像も伸びちじみ、
オパシティはまあいいか。

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

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


すべてのぜんかくくうはくは、はんかくにしてちょ!
<!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) { //x軸の回転
    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>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング