椭圆轨道立体围绕效果
如图,这些按钮围绕中心的图像做椭圆运动,点击其中一个按钮时移动到最右边或者最前面,大佬救我,真解决了我会多追加奖励的
https://www.jsdaima.com/js/demo/2934.html
https://www.jsdaima.com/js/2934.html
https://blog.csdn.net/jslang/article/details/52711046
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#box {
position: relative;
border-radius: 50%;
width: 600px;
height: 400px;
border: 1px solid #999;
}
#box div {
position: absolute;
border-radius: 50%;
background-color: #f66;
width: 100px;
height: 60px;
text-align: center;
font-size: 40px;
line-height: 60px;
}
</style>
</head>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<script type="text/javascript">
;(function () {
var box = document.getElementById("box");
var as = box.getElementsByTagName("div");
var bw = (box.offsetWidth-as[0].offsetWidth)/2;
var bh = (box.offsetHeight-as[0].offsetHeight)/2;
var rad = 0;
const R2 = Math.PI*2;
var timer;
function draw() {
for (var i = 0; i < as.length; i++) {
var d = as[i];
var rt = rad + i/as.length*R2;
var tx = (-Math.sin(rt))*bw;
var ty = Math.cos(rt)*bh;
d.style.left = bw+tx + "px";
d.style.top = bh+ty + "px";
}
}
function loop() {
clearTimeout(timer);
rad = (rad + 0.01) % R2;
draw();
timer = setTimeout(loop, 16);
}
function to(t,u) {
clearTimeout(timer);
var n = ((rad+R2-t) % R2)>Math.PI ? u : -u;
rad = (rad + n + R2) % R2;
if (Math.abs(rad-t)>=u)
timer = setTimeout(to.bind(null,t,u), 16);
else
rad = t;
draw();
}
box.addEventListener("mouseenter", function (e) {
clearTimeout(timer);
}, false);
box.addEventListener("mouseleave", function (e) {
loop();
}, false);
for (var i = 0; i < as.length; i++) {
var d = as[i];
d.addEventListener("click", function (index,e) {
var t = R2 - index/as.length*R2;
to(t,0.05);
}.bind(d,i), false);
}
loop();
})();
</script>
</body>
</html>