1

我需要在我的网站上有一个太阳图像和月亮图像，这将在一天中的大部分时间被隐藏，但是当它们显示的时候，它们将从左侧开始以圆周运动并完成到正确的。

我有代码说明白天或晚上要实现多少百分比，我只需要知道如何在不旋转图像的情况下以圆周运动移动图像。

4

2 回答 2

3

CSS部分：

  1. 将css位置设置为绝对
  2. 根据三角法设置x和y坐标（css顶部和左侧）

三角函数：

基本上你想走半圈，0% 的 pi 度和 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

好的。

我只是为自己想出了圆周运动，这很简单。你用一个半径、一个角度和一些简单的数学运算来确定某物的位置。所以...

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 回答