<html>
<head>
<style>
.container{background:white;}
.imgContainer img{position:fixed;width:60px;height:60px}
</style>
</head>
<script>
var radius = 220;
var offsetX = 300;
var offsetY = 200;
var offsetA = 0;
setInterval(updateSpin, 20);
updateSpin();
function updateSpin(){
var imgs = document.querySelectorAll( '#imgContainer img' );
// Evenly distribute images around circle
slice = 360.0 / imgs.length;
imgs.forEach((e,index) => {
// Convert angle to radians
radians = (slice*index + offsetA) * (Math.PI/180);
// Some simple pythagora geometry
x = offsetX + Math.cos(radians) * radius;
y = offsetY + Math.sin(radians) * radius;
// Update image position
e.style.top = y+60+'px';
e.style.left = x+40+'px';
});
// Increment angle to images rotate on next update
offsetA += 0.5;
}
</script>
<body>
<div class="container">
<div class="inner">
<div class="imgContainer" id="imgContainer">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
<img src="7.png">
<img src="8.png">
<img src="9.png">
</div>
</div>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar