原生js制作旋转花瓣效果
摘要：学开发前端好还是后端好 软件开发前端知识视频 前端开发工作一年面试经验 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> ……
学开发前端好还是后端好 软件开发前端知识视频 前端开发工作一年面试经验
html 代码
<!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”>
<title>前端开发需要掌握的js</title>
<style>
div {
width: 200px;
height: 200px;
border-radius: 200px 0;
background: rgba(170, 248, 2, 0.3);
position: absolute;
top: 100px;
left: 500px;
transform-origin: 0 200px;
}
.box {
transform: rotate(315deg);
}
</style>
</head>
<body>
<div class=”box”></div>
</body>
<script src=”./tools.js”></script>
<script>
const box = document.querySelector(‘.box’);
var timer;
var begin = 0;
var duration = 7000;
var arr = [];
//点击事件
box.addEventListener(‘click’, function (e) {
e.preventDefault();
document.body.innerHTML = ”;
//自动生成24个div
for (let i = 0; i < 24; i++) {
var div = document.createElement(‘div’);
document.body.appendChild(div)
};
var starTime = Date.now();
var change = 360;
//启动动画帧
(function aaa() {
timer = window.requestAnimationFrame(aaa);
var time = Date.now() – starTime;
//判断运动时间是否超过设定时间
if (time > duration) {
time = duration;
window.cancelAnimationFrame(timer);
timer = null;
}
var currentPos = change / duration * time + begin;
console.log(currentPos);
//将运动的角度四舍五入
var num = Math.round(currentPos)
if (num % 15 === 0) {
arr.push(num)
};
//将15的倍数储存到arr中 并且去掉重复项
var arr1 = [];
for (var i in arr) {
if (arr1.indexOf(arr[i]) === -1) {
arr1.push(arr[i])
}
}
console.log(arr1)
var divs = document.body.children;
for (let i = 0; i < divs.length; i++) {
divs[i].style.transform = `rotate(${currentPos}deg)`
divs[i].style.transform = `rotate(${arr1[i]}deg)`
}
})()
})
</script>
</html>
web前端开发面试上机 前端开发需要学的英文 web前端开发html教学视频
» 本文来自：前端开发者 » 《原生js制作旋转花瓣效果》
» 本文链接地址：https://www.rokub.com/5353.html
» 您也可以订阅本站：https://www.rokub.com
近期评论