我需要在我的网站上有一个太阳图像和月亮图像,它们在一天的大部分时间里都是隐藏的,但是当它们显示的时候,它们将从左边开始做圆周运动,然后向右完成。
我有代码说明要实现的白天或晚上的百分比,我只需要知道如何在不旋转图像的情况下以圆周运动移动图像。
最佳答案
CSS部分:
- 将CSS位置设置为绝对位置
- 根据三 Angular 函数设置 x 和 y 坐标(css 顶部和左侧)
三 Angular 函数:
基本上你想走半个圆,0% 的 pi 度和 100% 的 0 度,所以它就像获取圆坐标(即 x=center+radius*cos(angle))但唯一复杂的部分是您需要反转 Angular :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);
关于javascript - 如何在不旋转的情况下以圆周运动移动图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14940415/