javascript - js围绕圆旋转
本文介绍了javascript - js围绕圆旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
border-radius: 50%;
margin:100px auto;
position: relative;
}
<div class="box"></div>
<button>开始</button>
<script>
var box=document.querySelector('.box');
var btn=document.querySelector('button');
btn.onclick=function(){
var ship=document.createElement('div');
ship.className+="ship orbit-1";
box.appendChild(ship)
</script>点击按钮动态添加元素，怎么让这个添加的元素围绕.box旋转。。我要怎么改变添加元素的left和top才能让他围绕<div class="box"></div>这个圆运动？？？
解决方案
你是要这样么？
.box{
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 50%;
margin: 200px auto;
position: relative;
}
.ship {
background-color: red;
position: absolute;
left: 288px;
top: 215px;
width: 20px;
height: 20px;
border-radius: 50%;
animation: myOrbit 4s linear infinite;
}
@keyframes myOrbit {
from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
to { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}
var box=document.querySelector('.box');
var btn=document.querySelector('button');
btn.addEventListener('click', function(){
var ship = document.querySelector('.ship');
if(!ship){
var div=document.createElement('div');
div.classList.add('ship');
return document.body.appendChild(div);
}
document.body.removeChild(ship);
}, false);
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<button>触发</button>
<script src="script.js"></script>
</body>
</html>你也看这里的在线demo：plunker
这篇关于javascript - js围绕圆旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
