小特效
点击红色小方块出现围绕一周的小按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 前端 后端 运维 数据库 seo ui 混合开发 */
#wrap {
position: relative;
margin: 100px auto 0;
width: 50px;
height: 50px;
background: pink;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background: green;
border-radius: 50%;
}
#he {
position: absolute;
width: 50px;
height: 50px;
background: red;
z-index: 999;
}
</style>
</head>
<body>
<div id="wrap">
<div id="he"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<script>
var a = true;
var oBox = document.querySelectorAll("#wrap .box");
var mlength = oBox.length; //盒子个数
var mdeg = 360 / mlength; //每一个盒子的角度
he.onclick = function (ev) {
var oEvent = ev || event;
// alert("this is div1");
//js阻止事件冒泡
oEvent.cancelBubble = true;
oEvent.stopPropagation();
//js阻止链接默认行为，没有停止冒泡
// oEvent.preventDefault();
// return false;
a = !a;
console.log(a);
if (a == false) {
for (var i = 0; i < oBox.length; i++) {
oBox[i].style.transform =
"rotateZ(" + mdeg * i + "deg) translateX(70px)";
oBox[i].style.transition = "0.5s " + (mlength - i) * 0.1 + "s"; // 0.1 动画调节
}
} else {
for (var i = 0; i < oBox.length; i++) {
oBox[i].style.transform = "rotateZ(0deg) translateX(0px)";
oBox[i].style.transition = "0.5s " + (mlength - i) * 0.1 + "s"; // 0.1 动画调节
}
}
};
</script>
</body>
</html>
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
