이 기사의 예에서는 Javascript를 사용하여 회전 가능한 원을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
자바스크립트 기반의 회전원은 다소 입체감이 있고 입체감이 강한 코드입니다. JS 스크립트 프로그래밍을 배우기에 좋은 예입니다. 애니메이션을 생성합니다.
작동 효과는 아래와 같습니다.
구체적인 코드는 다음과 같습니다.
<html>
<head>
<title>旋转的圆圈</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script language="JavaScript">
amount=ybase=15;
Color='#ffaaff';
GlowColor='#ff00ff';
xbase=-70;
step=c=0.05;
TrigSplit=360/amount;
xpos=ypos=currStep=Ci=0;
for (i=0; i < amount; i++)
document.write('<div id="Div" style="position:absolute;top:0px;left:0px;height:20;width:20;text-align:center"><B>.</B></div>');
function running(){
var MY=document.body.scrollTop+document.body.clientHeight/2 + document.body.clientHeight/2.8*Math.cos((Ci)/4)*Math.cos(Ci/10);
var MX=document.body.scrollLeft+document.body.clientWidth/2 + document.body.clientWidth/2.4*Math.sin((Ci)/6)*Math.sin(Ci/20);
ypos=MY;
xpos=MX;
for (i=0; i < amount; i++){
var d=Div[i].style;
if (d.pixelTop > ypos+2){
d.fontSize=18;
d.paddingTop=7;
d.filter='glow(color='+GlowColor+', strength=7)';
if (d.pixelTop > ypos+10){
d.fontSize=15;
d.paddingTop=10;
d.filter='glow(color='+GlowColor+', strength=5)';
}
}
else{
d.fontSize=25;
d.paddingTop=0;
d.color=Color;
d.filter='glow(color='+GlowColor+', strength=8)';
}
d.top=ypos+ybase*Math.sin(currStep+i*TrigSplit*Math.PI/180);
d.left=xpos+xbase*Math.cos(currStep+i*TrigSplit*Math.PI/180);
}
Ci+=c;
currStep+=step;
setTimeout('running()',20);
}
running();
</script>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
