document.getElementById("jupiter").style.transform = "none";
document.getElementById("jupiter").style.margin = "-45 0 0 -50";
Number.prototype.toRadian = function() {
return this * Math.PI / 180;
};
var animations = [];
handler();
function addAnimate(appendTo,element,speed,radius){
animations.push({
ap:appendTo,
el:element,
speed:speed,
angle:0,
radius:radius
});
}
function handler() {
animations.map(function (element) {
var xCenter = element.ap.offsetLeft + element.ap.offsetWidth / 2;
var yCenter = element.ap.offsetTop + element.ap.offsetHeight / 2;
var w = element.el.offsetWidth;
var h = element.el.offsetHeight;
var x = xCenter - w / 2 + element.radius * Math.sin(element.angle.toRadian());
var y = yCenter - h / 2 + element.radius * Math.cos(element.angle.toRadian());
element.angle = (element.angle + element.speed) % 360;
element.el.style.left = x + 'px';
element.el.style.top = y + "px";
});
requestAnimationFrame(handler);
}
var jupiter = document.getElementById("jupiter");
var io = document.getElementById("io");
addAnimate(jupiter, io, 1, 140);Такой код на локалке работает:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: black;">
<img style="width: 60px; height: 60px; margin-top: 100px; margin-left: 600px; position: absolute;" src="moon.png" id="moon">
<img style="width: 60px; height: 60px; margin-top: 300px; margin-left: 600px; position: absolute;" src="moon.png" id="moon2">
<script>
animation(moon2,2,20);
function animation(elem,speed,delay) {
var range = 150;
var x = 0;
var s = speed * Math.PI / 180;
setInterval(function() {
x += s;
elem.style.left = range * Math.sin(x) + 'px';
elem.style.top = range * Math.cos(x) + 'px';
}, delay);
}
</script>
</body>
</html>