• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:javascriptの円形画像ギャラリーのサンプル)

javascriptの円形画像ギャラリーのサンプルを探しています

このQ&Aのポイント
  • ホームページ作成において、javascriptを使用した円形画像ギャラリーのサンプルを探しています。
  • フラッシュではなくjavascriptで実装された、ゆっくり回転している画像ギャラリーが希望です。
  • ドラッグなどでスピードが変わらず、単に円形(3D)になっている画像スライダーを探しています。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.9

 function sinIntDeg (n) {   return bufSin [n % 360 |0];  }    function cosIntDeg (n) {   return bufCos [n % 360 |0];  }      function aryToFixedString (ary) {   return ary.map (function (a) { return a.toFixed (10); } ).join (',');  }    function Tile (image, distance, angle, scale, offsetHeight) {   this.image = image;   this.distance = distance;   this.angle = angle;   this.scale = scale;   this.offsetHeight = offsetHeight;   this.position = {};   this.rotate ();  }  function TileRotateY (stepAngle) {   var a = this.angle += stepAngle || 0;   var r = this.distance;      this.position = {    x: sinIntDeg (a) * r,    y: this.offsetHeight,    z: cosIntDeg (a) * r   };      return this;  }      function TileCreate (image, distance, angle, scale, offsetHeight) {   if (arguments.length < 2)    throw new Error;      return new Tile (    image,    distance || 100,    angle || 0,    scale || 1,    offsetHeight || 0   );  }    Tile.prototype.rotate = TileRotateY;  Tile.create = TileCreate;    //________________________    function FloorMember (member, angle, step) {   this.member = member;   this.angle = angle;   this.step = step;   this.timerId = null;  }      function FloorMemberRotate () {   this.angle += this.step;      this.member.forEach (function (tile) {    var p = tile.rotate (this.step).position;    var sin = sinIntDeg (tile.angle);    var cos = cosIntDeg (tile.angle);    var ary = [     tile.scale * cos,       0,        -sin,      0,             0,  tile.scale,         0,      0,            sin,       0,  tile.scale * cos,      0,            p.x,      p.y,        p.z,      1    ];    tile.image.style['-webkit-transform'] = 'matrix3d('+ aryToFixedString (ary)+')';   }, this);  }      function FloorMemberStart () {   var that = this;   var func = function () { that.rotate (); };   if (! this.timerId) {    this.timerId = setInterval (func, 30);   }  }      function FloorMemberCreate (images, radius, offsetFloor, step) {   if (arguments.length < 2)    throw new Error;      var member = [];   var imgs = Array.prototype.slice.call (images, 0);   var len = imgs.length;   var side = int (radius * 2 * Math.tan (Math.PI / len) + 0.5);   var img;   var aspectRatio = parseInt (imgs[0].height, 10) / parseInt (imgs[0].width, 10);   var height = int (side * aspectRatio + 0.5);   var offsetHeight = (offsetFloor || 0) * height;   var n = 360 / len;   for (var i = 0; i < len; i++) {    img = imgs[i];    img.width = String (side);    img.height = String (height);    member.push (new Tile (img, radius, n * i, 1, offsetHeight));   }      return new FloorMember (member, 0, step || 1);  }      FloorMember.prototype.start = FloorMemberStart;  FloorMember.prototype.rotate = FloorMemberRotate;  FloorMember.create = FloorMemberCreate;    this.FloorMember = FloorMember; }) (); FloorMember.create (document.querySelectorAll ('#screen img[alt="f0"]'), 1000, 0, 1).start (); FloorMember.create (document.querySelectorAll ('#screen img[alt="f1"]'), 1000, 1, 2).start (); FloorMember.create (document.querySelectorAll ('#screen img[alt="f2"]'), 1000, 2, 3).start (); </script> ipad2 で、うごかしてみました。 そこそこ速くうごきますよ!

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (8)

回答No.8

おはようございます。あそんでいたら、あさになりました。 ipad なら、ごきぼうどおりにうごきます(?) ながいので、ぶんかつです。 fujillin さんに、しげきされ・・・ <!DOCTYPE html> <title>sample</title> <style> #screen {  -webkit-perspective: 500px;  -webkit-transform : transform-style('preserve-3d'); } #screen img {  position : absolute;  top : 100; } </style> <body> <div id="screen">  <img src="./img/photo0.jpg" alt="f0" width="400" height="100">  <img src="./img/photo1.jpg" alt="f0" width="400" height="100">  <img src="./img/photo0.jpg" alt="f0" width="400" height="100">  <img src="./img/photo1.jpg" alt="f0" width="400" height="100">  <img src="./img/photo0.jpg" alt="f0" width="400" height="100">  <img src="./img/photo1.jpg" alt="f0" width="400" height="100">  <img src="./img/photo0.jpg" alt="f0" width="400" height="100">  <img src="./img/photo1.jpg" alt="f0" width="400" height="100">  <img src="./img/photo0.jpg" alt="f1" width="400" height="100">  <img src="./img/photo1.jpg" alt="f1" width="400" height="100">  <img src="./img/photo0.jpg" alt="f1" width="400" height="100">  <img src="./img/photo1.jpg" alt="f1" width="400" height="100">  <img src="./img/photo0.jpg" alt="f1" width="400" height="100">  <img src="./img/photo1.jpg" alt="f1" width="400" height="100">  <img src="./img/photo0.jpg" alt="f1" width="400" height="100">  <img src="./img/photo1.jpg" alt="f1" width="400" height="100">  <img src="./img/photo0.jpg" alt="f2" width="400" height="100">  <img src="./img/photo1.jpg" alt="f2" width="400" height="100">  <img src="./img/photo0.jpg" alt="f2" width="400" height="100">  <img src="./img/photo1.jpg" alt="f2" width="400" height="100">  <img src="./img/photo0.jpg" alt="f2" width="400" height="100">  <img src="./img/photo1.jpg" alt="f2" width="400" height="100">  <img src="./img/photo0.jpg" alt="f2" width="400" height="100">  <img src="./img/photo1.jpg" alt="f2" width="400" height="100"> </div> <script> (function () {  var sin = Math.sin;  var cos = Math.cos;  var int = Math.floor;  var deg = Math.PI / 180;  var tmp;  var bufSin = [];  var bufCos = [];    for (var i = 0; i < 360; i++) {   tmp = i * deg;   bufSin[i] = sin (tmp);   bufCos[i] = cos (tmp);  }   //つづく

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.7

#5です。 初期位置が予定と違っているのに気が付きました。 計算ミスってましたので、訂正。 // var animationOffset = 0; 削除(使用していなかった)  var setUnitData = function(){   var sylinder = getSylinderPos(); // imageOffsetX = sylinder(0).sx; 符号間違え   imageOffsetX = -sylinder(0).sx;   for(x = 0; x<screenW; x += unitW)    units.push(sylinder(x));   unitN = units.length;   imageOffsetX = 0; // 追加してます  } 初期表示の位置だけなので、あまり問題にはならないけれど、 他にもいろいろあるかも。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

// つづき  var setEvent = function(){   document.addEventListener("click", function(evt){    var t = evt.target;    if(t.parentNode.id != "buttons") return;    switch(t.value){   case "<":     if(animate){      if(speed>-30) speed -= 2;      if(speed==0) stop();     } else {      speed = -1;      start();     }     break;   case "□":     speed = 0;     stop();     break;   case ">":     if(animate){      if(speed<30) speed += 2;      if(speed==0) stop();     } else {      speed = 1;      start();     }     break;   default:    }   }, false);  }  var init = function(id){   canvas = document.createElement("canvas");   var sc = document.getElementById(id);   if(!canvas.getContext || !sc) return;   screenW = sc.clientWidth;   screenH = sc.clientHeight;   sc.insertBefore(canvas, sc.firstChild);   var img = sc.getElementsByTagName("img");   imageH = img[0].clientHeight;   setCanvas();   setUnitData();   setSourceImage(img);   setEvent();   draw();  } init(id); } //--> </script> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.5

#3です。 canvasを使ったことがないので、お勉強のために作ってみました。 なんとかアニメーションに耐えられそう。 立体の座標計算もよくわからないので、かなりいい加減です。(要領も悪い) それなのでとてもこのままでは使えませんが、とりあえず雰囲気は出ているので、サンプル代わりに… (<>のクリックで速度が変わります) (全角空白は半角に) <!DOCTYPE html> <head><title>sample</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <style type="text/css"> <!-- #screen{  width: 800px;  height: 300px;  position: relative;  overflow: hidden; } #screen img{  width: 200px;  height: 100px;  border: 1ps solid red; } #buttons{  width: 800px;  text-align: right; } #buttons input{  background-color: #fff; } //--> </style> </head> <body> <div id="screen"> <img src="img/photo01.jpg" alt="photo01"> <img src="img/photo02.jpg" alt="photo02"> <img src="img/photo03.jpg" alt="photo03"> <img src="img/photo04.jpg" alt="photo04"> <img src="img/photo05.jpg" alt="photo05"> </div> <div id="buttons"> <input type="button" value="<"> <input type="button" value="□"> <input type="button" value=">"> </div> <script type="text/javascript"> <!-- window.onload = function(){  var id = "screen"; // 対象要素のid  var diameter = 350; // 円筒の径  var zOffset = 35; // 視点の高さ方向オフセット  var unitWidth= 1;  // 画像の計算幅(ピッチ)  var speed  = 0;  // アニメーション速度  var interval = 40; // アニメーションインターバル  var canvas;  var ctx;  var screenW;  var screenH;  var screenOffsetZ;  var sourceImage;  var imageW;  var imageH;  var imageOffsetX = 0;  var unitW = unitWidth;  var unitN;  var units = [];  var animate;  var animationOffset = 0;  var start = function(){   animate = setInterval(move, interval);  }  var stop = function(){   clearInterval(animate);   animate = null;  }  var move = function(){   imageOffsetX += speed;   if(imageOffsetX> imageW) imageOffsetX -= imageW;   if(imageOffsetX<-imageW) imageOffsetX += imageW;   draw();  }  var draw = function(){   ctx.fillStyle = "#f0f0f0";   ctx.fillRect( 0 , 0 , screenW , screenH );   for(var i=0; i<unitN; i++){    var u = units[i];    var x = u.sx + imageOffsetX;    while(x<0)   x += imageW;    while(x>imageW) x -= imageW;    ctx.drawImage(sourceImage, x, u.sy, u.sw, u.sh, u.dx, u.dy, u.dw, u.dh);   }  }  var setCanvas = function(){   ctx   = canvas.getContext("2d");   diameter= Math.max(diameter, screenW * 0.3);   ctx.globalCompositeOperation = "source-over";   canvas.setAttribute("width", screenW);   canvas.setAttribute("height", screenH);   canvas.style.position = "absolute";   var z = zOffset / Math.cos(Math.atan2(screenW, diameter));   screenOffsetZ = (screenH - z) * 0.5;  }  var setSourceImage = function(elms){   sourceImage = document.createElement("canvas");   var tmpC = sourceImage.getContext("2d");   var images = [];   var w = 0;   var h = imageH;   var d = units[0].sw;   var e;   for(var i=0; e=elms[i++];){    images.push(e);    w += e.clientWidth;   }   imageW = w;   i = 0;   while(d>0){    e = images[i++];    d -= e.clientWidth;    w += e.clientWidth;    images.push(e);   }   sourceImage.setAttribute("width", w);   sourceImage.setAttribute("height", h);   w = 0;   for(i=0; e=images[i++];){    tmpC.drawImage(e, w, 0, e.clientWidth, imageH);    w += e.clientWidth;   }  }  var getSylinderPos = function(){   var ww = 0.5 * screenW;   var dd = 0.5 * diameter;   var hh = 0.5 * imageH;   var offZ = screenOffsetZ - zOffset;   var Matn = Math.atan2;   var Mcos = Math.cos;   return function(x){    var delta = unitW;    if(x + delta > screenW) delta = screenW - x;    var sx2 = Matn(x + delta - ww, dd) * diameter + imageOffsetX;    var atn = Matn(x - ww, dd);    var cos = 1 / Mcos(atn);    var sx = atn * diameter + imageOffsetX;    var sy = 0;    var sy2 = imageH;    var y  = (zOffset - hh) * cos + offZ;    var y2 = (zOffset + hh) * cos + offZ;    return { sx:sx, sy:sy, sw:sx2-sx, sh:sy2-sy, dx:x, dy:y, dw:delta, dh:y2-y };   }  }  var setUnitData = function(){   var sylinder = getSylinderPos();   imageOffsetX = sylinder(0).sx;   for(x = 0; x<screenW; x += unitW)    units.push(sylinder(x));   unitN = units.length;  } // つづく

全文を見る
すると、全ての回答が全文表示されます。
回答No.4

>No.3 なるほど、CSSで描く時は、transform: matrix3d()を使えばいけるかもしれません。 (私自身、matrix3d()の使い方がわかっていませんので、、、) http://jsfiddle.net/vEWEL/11/ http://jsfiddle.net/paulsidebottom/jbfSj/ via: http://stackoverflow.com/questions/8861739/css-matrix3d-transform

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

#1です。 ちょっと探してみたら、canvasを利用して画像を変形する方法を紹介しているものがありました。 http://jsfiddle.net/fQk4h/ この方法を応用して円筒曲面からの投影を行なえば、それなりに綺麗にできると思いますが、計算量が多くなりそうなのでアニメーションに耐えられるかどうかは不明です。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

軸移動(No.1参照サイトのような移動)を表現するのはwidth、heightを小さくするだけです。 軸回転が組合わさる場合はCSS3のtransformが必要です。 { transform-style: preserve-3d; perspective: 500; transform: rotateY(60deg); } このような書き方で軸回転します。 ※すみません、両方とも「軸回転」というのが正式な呼び方かもしれませんが、 非常にわかりづらいと思いますので、個人的に「軸移動」「軸回転」と使い分けています。 CSSでは台形に変形させる方法はなかったと思います(skewという平行四辺形に変形させるものはあります。) ので、heightを調整して擬似的に見せかける程度では無いでしょうか。 ご参考まで。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

「carousel」、「3D」などをキーに検索してみればいろいろと見つかると思います。 原理的にはこんな感じでしょうか? (ご質問にあわせるには、近景部分を非表示するなどが必要ですが…) http://www.professorcloud.com/mainsite/carousel.htm

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 画像を回転させる方法

    質問させてください。 今、下記のような画像をドラッグとホイールで360度回転させる機能 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-reel.html に、更にスライダー機能(http://zack.dtiblog.com/blog-entry-15.html)も使える様にしたいのですが、参考サイトも見つからず、うまい事組み合わせようとしても実装できません。 もしわかる方いらっしゃいましたら教えて頂ければと思います。 何卒宜しくお願い致します。

  • 円形ボリュームのUIの実装方法

    言語は寧ろなんでも良い(Dalvik javaで実装予定)のですが、音楽再生アプリケーションで、 シークバーではなく、円形のボリュームを実装しようと考えています。 ボリュームの画像を用意したのですが、 UIをドラッグした時の、回転の計算方法が思いつきません。 ドラッグイベントはx,yでAPIより受け取り、移動時のx,yの差をとるとして、 直線の動きなら、単にXまたはYを引くだけで計算できると思いますが、 X,Yの差を回転角度に計算する場合、どの様に計算すれば、それっぽくなるのでしょうか? 三平方を使うのでしょうか?

  • JavaScript でスライダーを作る方法

    JavaScript を使ってブラウザー上でスライダーを表示し、ツマミをマウスで上下または左右にドラッグするとその位置情報を返すような関数を作りたいと思っています。縦方向に上下するスライダーだと横軸方向は固定値で、縦軸の座標をツマミが動く範囲内で取得したいのですが、Canvas 用の関数でそのようなものを作ることは可能でしょうか? 詳しい方がいらっしゃいましたら、どうか教えてください。お願いします。

  • 【Flash】ローカルで有効なJavascriptがオンラインで動作しない

     失礼いたします。  現在、私はFlash8 BasicでActionscriptとJavascriptを使って、クリックで開くポップアップウィンドウを作成しているのですが、 ローカル環境で実行できるものがオンラインで実行できないという現象が起こって困っています。  まず、私は以下のページの「GetURL"javascript :"」の項を参考にして作りました。 このページの技術は2004年のもので、FlashPlayer7以下でないと動作しない事を確認しています。 http://www.adobe.com/jp/support/flash/ts/documents/fl0308.html  私はMacのIE5.2とSafari2.0.4でブラウザチェックしているのですが、Mac版IE5.2だと、上記したページのスクリプトがローカルでしか動作しません。 私のファイルに不備があるのかと思い、試しに上記ページのサンプルをアップロードしてみたのですがそれもうまくいきません。 こちらもローカルだと動作します。  ローカル時の確認方法はHTMLファイルをドラッグする形です。  これはサーバー側の問題なのでしょうか? もしこの方法が有効でない場合は、スクリプト自体を変えた方が良いのでしょうか?  どなたかご回答願います。

  • JavaScriptを使った画像ギャラリー

    http://www.efectorelativo.net/laboratory/noobSlide/ のサンプル7のようなギャラリーを使いたいのですが、 自分なりにソースを見ていじってみても全くうまいこといきません。 サンプル7に似たギャラリーでもいいので日本語の解説付きのサイト等をご存知であれば教えていただきたいと思います。 よろしくお願いいたします。

  • JavaScript リンク付き画像ギャラリー

    初めまして。 francfrancのNEW ITEMSのところにあるJavaScriptについて http://shop.bals.co.jp/shop/c/c10/ こういうギャラリー(商品画像を並べてリンクで飛べる)をサイトに つくりたいのですがどうか教えていただけたらと思います。 サンプルなどあれば教えてください。よろしくお願いします。

  • こんなJavascriptのサンプル探してます。

    こんなJavascriptのサンプル探してます。 添付はGメールのインターフェイスなんですが、画像を取り込んでいるときにダウンロード中のバーがでますよね。こういうのを実現したいと思っているのですが、サンプルなどをうまく見つけることができていません。 もしご存知でしたら教えていただければ幸いです。 よろしくお願いいたします。

  • loadMovieで呼び出したswfの不具合

    Flash初心者です。 環境は、OSはWindowsXPで、FlashのヴァージョンはCS3です。 loadMovieで呼び出したswfファイルが正常動作しません。 表示枠用に四角形の枠を書き、 ムービークリップシンボルに変換、 シンボル名は「load.mc」 インスタンス名も同じく「load.mc」とし、 タイムラインの1フレーム目に this.load_mc.loadMovie("●●●.swf"); と記述し、プレビューしたところ 呼び出したswfファイルが正常に動作しませんでした。 また、 on(press){ this.load_mc.loadMovie("●●●.swf"); } と記述したボタンでも結果は同様でした。 呼び出したswfファイルは、 いくつかの任意の角度から撮影した物体の画像をタイムライン上に並べ 画像の360度回転、拡大縮小をスライダーでコントロールするというもので 因みに、これはMdNムックの 「プロが教えるFlashアイデア工房」の127ページに掲載されていたものの流用です。 尚、掲載されていたサンプルのswfファイルを 試しに同様にloadMovieで呼び出してみたところ結果は同じでした。 swfファイル単独では正常に動作するのですが loadMovieで呼び出すと、 記述されたスクリプトがクリアされてしまうのか全く動作しません。 何が問題なのか全くわからず途方に暮れています。 どなたかご教授ください。 以下は、 呼び出すswfファイルに記述されたスクリプトです。 _________________________ ※画像のムービークリップに記述したスクリプト ↓↓↓ this.onLoad = function() { rtK = 0.3;//ズームスピード minSC = 30//縮小時の最小値; maxSC = 180//拡大時の最大値; //回転初期設定 frK = 0.3;//回転スピード maxFr = _totalframes;//最大フレーム数の設定 }; this.onEnterFrame = function() { //////画像サイズ////// tarSC = _root.sliderZ.zmSlider()*(maxSC-minSC)/100+minSC;//0で最小、100で最大になるよう変換 vSC = (tarSC-_xscale)*rtK;//目標の値に近づく this._xscale += vSC;//表示 this._yscale += vSC;//表示 //////画像回転位置////// tarFr = _root.sliderR.rtSlider()*maxFr/100;//0で最小、100で最大になるよう変換 vFr = (tarFr-curFr)*frK;//目標の値に近づく curFr += vFr; tmpFr = Math.floor(curFr); tmpFr %= maxFr; if (tmpFr<0) tmpFr += maxFr;//負の値の場合 gotoAndStop(tmpFr+1);//表示 }; this.onLoad(); ※回転用スライダーのムービークリップに記述したスクリプト ↓↓↓ this.onLoad = function() { //回転初期設定 range = 234;//スライダーのドラッグ範囲 minX = 92;//スライダーのX座標の最小値 maxX = minX+range;//スライダーのX座標の最大値 curX = _x; btPress = false;//ドラッグ中か否か } function rtSlider(){ if (btPress) curX = _parent._xmouse;//スライダーのドラッグ curX = Math.min(curX, maxX);//ドラッグ範囲 curX = Math.max(curX, minX);//ドラッグ範囲 _x = curX;//移動 // //画像の回転 rtVal = (curX-minX)*100/range;//0から100の値に変換 return(rtVal); } this.onPress = function() { btPress = true; }; this.onRelease = this.onReleaseOutside=function () { btPress = false; }; this.onLoad();

  • 外付けUSBまたはIEEE1394接続DVDドライブの回転速度

    外付けUSBまたはIEEE1394接続DVDドライブの回転速度調節ソフトを探しております。 他の人の結果もふくんでいますが、これまでには Nero Drive Speed AnyDVD CD-ROM SPEED CHANGER for Windows を試してみましたが、どれもうまくいきません。 OS:WinXP ドライブ:DVSM-D5812IU2 メーカー情報:http://buffalo.melcoinc.co.jp/products/catalog/item/d/dvsm-d5812iu2/index.html よろしくお願いします。

  • JavaScriptのフォトギャラリー

    JavaScriptのフォトギャラリー いつもお世話になっております。 下記のサイトで写真を見せるのに使用されているギャラリーを探しています。 http://www.metamo.info/history/ 宜しくお願いいたします。