1

ウェブサイトに太陽の画像と月の画像を表示する必要があります。これは、1日の大半は非表示になりますが、表示する時間になると、左から始まり、左から円を描くように動きます。右。

昼夜を問わず、実装する割合を示すコードがあります。画像をまったく回転させずに、画像を円を描くように動かす方法を知る必要があります。

4

2 に答える 2

3

cssパート：

  1. cssの位置を絶対に設定します
  2. 三角法に従ってx座標とy座標（cssの上下）を設定します

三角法：

基本的には、半円、0％で円周率、100％で0度になりたいので、円の座標（x = center + radius * cos（angle））を取得するのと同じですが、複雑な部分は次のとおりです。角度を反転するには：PI *（1-percent）

var centerX = document.body.offsetWidth / 2;   // center of screen
var centerY = document.body.offsetHeight / 2;
var radiusX = document.body.offsetWidth / 3;   // radius 1/3 screen
var radiusY = document.body.offsetHeight / 3;
var angle = Math.PI * (1-percent);
var x = centerX + radiusX * Math.cos(angle);
var y = centerY + radiusY * Math.sin(angle);
于 2013-02-18T16:22:35.143 に答える
0

Ok。

自分で円運動を考えただけで、とても簡単です。あなたは半径、角度、そしていくつかの簡単な数学を取り、何かの位置を決定します。それで...

var body   = document.getElementsByTagName("body")[0],
    radius = 100, // Some radius here
    max    = 50;  // max number of generations we want (half a circle)
for (var i = 1; i <= max * 2; i++) {
    var div                   = document.createElement("div"),
        angle                 = Math.PI * (i / max);
    div.style.backgroundColor = "#000";
    div.style.borderRadius    = div.style.height = div.style.width = "8px";
    div.style.left            = ((Math.sin(angle) * radius) + radius) + "px";
    div.style.position        = "absolute";
    div.style.top             = ((Math.cos(angle) * radius) + radius) + "px";
    body.appendChild(div);
}

そして、あなたは完全な円を取得する必要があります。必要に応じて数学を分解して再構築するだけで、うまくいくはずです。

于 2013-11-11T17:17:53.907 に答える