- ベストアンサー
jQueryのCirculateを利用した画像回転のスタートポイント変更について
- jQueryのCirculateを利用してサイトを構築している際、画像が回転するスタートポイントを変更することは可能でしょうか？具体的には、指定した位置から時計回りや反時計回りに回転させたいと考えています。
- 現在の状態では、ページを開くと画像が南側をスタートとして時計回りに周っていますが、中途半端な位置や北側から始めるように変更したいと思っています。ただし、自分の知識ではこの方法が分からず、調べ方にも戸惑っています。
- もし、このような変更が可能な方法をご存知の方がいらっしゃいましたら、教えていただきたいです。
- buzinesswa
- お礼率42% (50/117)
- JavaScript
- 回答数7
- ありがとう数4
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
ていせい。 x = Math.sin (angle * Math.PI / 180) * r; z = Math.cos (angle * Math.PI / 180) * r; を、 var x = Math.sin (angle * Math.PI / 180) * r; var z = Math.cos (angle * Math.PI / 180) * r; var p = (parts.position)(); を var p = parts.position(); ほそく position : rotationGenerator (r, 60, -1), はんけい，さいしょのかくど，そのかくどのへんかりょう ばぶばぶ。
その他の回答 (6)
- babu_baboo
- ベストアンサー率51% (268/525)
var view = function ( viewElement, distance, scale, parts) { var i = 0, p; var style = viewElement.style; var cx = viewElement.offsetWidth / 2; var cy = viewElement.offsetHeight / 2; var conversion = function (parts) { var style = parts.element.style; var p = (parts.position)(); var pz = (p[2] + distance) / scale; var py = p[1] / pz; var px = p[0] / pz; var ps = parts.size / pz |0; var ps2 = ps / 2; style.top = ((cy - py - ps2) |0) + 'px'; style.left = ((cx + px - ps2) |0) + 'px'; style.width = ps + 'px'; style.height = ps+ 'px'; style.zIndex = (distance - p[2])|0; }; style.position = 'relative'; style.overflow = 'hidden'; while (p = parts[i++]) p.element.style.position = 'absolute', conversion (p); return conversion; }; //__ var loop = function ( view, parts, interval ) { setInterval ( function () { for (var i = 0, p; p = parts[i++]; view (p)); }, interval || 50); }; //__ var hoge = view (document.getElementById('hoge'), 350, 200, parts); loop (hoge, parts); </script>
- babu_baboo
- ベストアンサー率51% (268/525)
<img id="ball3" alt="ball3" src="data:image/gif;base64, R0lGODlhGQAZAMQAAFU790U49jgy9S8x9Wxu9ikv9Cg1809e9Bsz8ik/8yVB8+bp/SNG 8SJM7y5V6zxk6CBT7Ut05jdp6LrN+xhb6s/d/FCH7V2N7zJ05W+f83+r9Qhd5Y+497HQ +p7E9////yH5BAEAAB8ALAAAAAAZABkAAAX/4CeO4lKdaLWQLFtN3STP8FS15NJ5Xuf/ s11n1VpwNBxe78f0HImjRSaD5CSVTixnehtlLFOqdWzVmI9fy8iDsVguYap5Hs9cNp7P AtN2X/51U39/bhQYHx0bGBISEY6DkBEXbg8WEhQbExmKjBIPD46hop+dmBoSGxQQnZ+t rqSMGJgWEKoQDQ0OuroPDp+7Dg0QtRsPwsO4ucC6DLrJwxQUDwm3t8kM2Nnaz8MHBwja 4eLhuAQE4NgK6uvs7eoICB4VBusJCQb4+fr39goJBQsWHDBgz0CBAQgTKhxQoEA+AiIm ODQ4QICAABgzYhSAsGGBLh8INKyIEYDJkwA2PTIsADFKgIMDSqI8GYAjSygiKrwkGWCm ygIAcEYRedBiRosrCQhl0WGgQY/5DkzAUWQCgQMDEgw4QGAqjhAAOw=="> </div> <script> var rotationGenerator = function ( r, angle, step) { angle = angle || 0; step = step || 5; return function ( ) { x = Math.sin (angle * Math.PI / 180) * r; z = Math.cos (angle * Math.PI / 180) * r; angle += step; return [x, 0, z]; }; }; //__ var r = 300; var parts = [ { element : document.getElementById('ball1'), position : rotationGenerator (r, 0, -1), size : 30 }, { element : document.getElementById('ball2'), position : rotationGenerator (r, 30, -1), size : 30 }, { element : document.getElementById('ball3'), position : rotationGenerator (r, 60, -1), size : 30 } ]; //__
- babu_baboo
- ベストアンサー率51% (268/525)
ぜ・ひ・に、jQuery とかつかわないとだめなの？ あそびでかいてみた。ぜんかくくうはくは、はんかくにしてちょ！ ながいのでぶんかつです。 そして、がぞうふぁいるがてきすとなので、しょうにんまちになるとおもいます <!DOCTYPE html> <title></title> <style type="text/css"> #hoge { width : 800px; height : 300px; } </style> <body> <div id="hoge"> <img id="ball1" alt="ball1" src="data:image/gif;base64, R0lGODlhGQAZAMQAAPeqO/abOPWQMvWHL/aobPR+KfN1KPSKT/JkG/NuKfNmJf3t5vFc I+9UIutcLuhhPO1IIOZoS+hUN/vEuuoyGPzVz+1fUO9uXeVAMvN6b/WIf+UWCPeUj/qz sfegnv///yH5BAEAAB8ALAAAAAAZABkAAAX/4CeO4lKdaLWQLFtN3STP8FS15NJ5Xuf/ s11n1VpwNBxe78f0HImjRSaD5CSVTixnehtlLFOqdWzVmI9fy8iDsVguYap5Hs9cNp7P AtN2X/51U39/bhQYHx0bGBISEY6DkBEXbg8WEhQbExmKjBIPD46hop+dmBoSGxQQnZ+t rqSMGJgWEKoQDQ0OuroPDp+7Dg0QtRsPwsO4ucC6DLrJwxQUDwm3t8kM2Nnaz8MHBwja 4eLhuAQE4NgK6uvs7eoICB4VBusJCQb4+fr39goJBQsWHDBgz0CBAQgTKhxQoEA+AiIm ODQ4QICAABgzYhSAsGGBLh8INKyIEYDJkwA2PTIsADFKgIMDSqI8GYAjSygiKrwkGWCm ygIAcEYRedBiRosrCQhl0WGgQY/5DkzAUWQCgQMDEgw4QGAqjhAAOw=="> <img id="ball2" alt="ball2" src="data:image/gif;base64, R0lGODlhGQAZAMQAADv38jj24zL12i/10mz23Sn0zCjzw0/0yRvytinzuyXztOb99iPx qyLvoi7rpDzooyDtl0vmozfomLr73Rjqg8/85lDtm13vpjLlhW/zrH/1tQjlao/3vLH6 z573wv///yH5BAEAAB8ALAAAAAAZABkAAAX/4CeO4lKdaLWQLFtN3STP8FS15NJ5Xuf/ s11n1VpwNBxe78f0HImjRSaD5CSVTixnehtlLFOqdWzVmI9fy8iDsVguYap5Hs9cNp7P AtN2X/51U39/bhQYHx0bGBISEY6DkBEXbg8WEhQbExmKjBIPD46hop+dmBoSGxQQnZ+t rqSMGJgWEKoQDQ0OuroPDp+7Dg0QtRsPwsO4ucC6DLrJwxQUDwm3t8kM2Nnaz8MHBwja 4eLhuAQE4NgK6uvs7eoICB4VBusJCQb4+fr39goJBQsWHDBgz0CBAQgTKhxQoEA+AiIm ODQ4QICAABgzYhSAsGGBLh8INKyIEYDJkwA2PTIsADFKgIMDSqI8GYAjSygiKrwkGWCm ygIAcEYRedBiRosrCQhl0WGgQY/5DkzAUWQCgQMDEgw4QGAqjhAAOw==">
- taka451213
- ベストアンサー率47% (436/922)
こんばんは。 多分ソースを見ているという事は、example.jsもあって、デモが見れる状態だと思います。 ここで例えば、 function startBallTwo() { の width: -700, を width: 700, に変えてみてください。 デモを見ると、1個だけ逆回転してませんか？ これはanimateの引数に渡りますから、プラスとマイナスで動きが逆になります。 （animateのtopとleftの数式に当てはめてみてください）
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 ＞jquery.circulate.jsの46行目辺りでしょうかね？ そうです。 そこのanimateの引数です。 初期位置を中心とした動きは簡単ですが、斜め移動とかは、結構ややこしくなると思いますです・・・はい。
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 ソース見てみました。 内部的にはjqueryのanimateを4回呼んで、それぞれの位置を計算（この場合は左右半分、上下半分とか）して渡してますね。 「北の位置から時計回り」は簡単にできそうです。 開始位置が違うだけで、結局は上下左右半分半分なので・・・。 中途半端な位置は難しそうです・・・。 内部的には、最初にCSSで定義されているpositionに基づいて、半分半分で計算してますから・・・。
補足
こんにちは。 迅速なご回答本当に有難う御座います。 変更する部分としては jquery.circulate.jsの46行目辺りでしょうかね？ ちょっと色々変更してみようと思います。
補足
中途半端な位置からのスタートは難しいという事なので それは私の知識では無理そうです。 もぅ一つお伺いしたいのですが 例えば北と南から(二つ)を回転させる事はどうなのでしょうか？ また新しくスクリプトを組み直さなければならないのでしょうか？