이 기사의 예에서는 JavaScript로 3차원 원의 3D 변환을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
여기에서는 자바스크립트를 사용하여 변형 가능한 3차원 원, 웹 페이지의 3D 변경, 색상이 변하는 원 특수 효과, 웹 페이지의 3D 원 특수 효과를 구현합니다. 원의 각 점은 서로 다른 색상을 가지므로 검정색 웹 페이지 배경에 비해 더 명확하게 볼 수 있습니다.
작동 효과는 아래와 같습니다.
구체적인 코드는 다음과 같습니다.
<html> <head> <title>变色的圆圈</title> <style type="text/css"> <!-- body { background-color: #000000; } --> </style></head> <body> <script language="JavaScript"> var CoLoUrS=new Array('ff0000','ffffff','0000ff','ffffff'); var dots=16; var step=0.3; var a_StEp=0.05; var RunTime=Xpos =Ypos =count_a=count=currStep =0; var cntr=70; var move_a=move=1; var curColour; document.write('<div id="moveDiv" style="position:absolute;top:0px;left:0px">'); for (i=0; i < dots; i++){ document.write('<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></div>'); } document.write('</div>'); var x = moveDiv.all; var numdiv=new Array(x[0],x[1],x[2],x[3],x[4],x[5],x[6],x[7],x[8],x[9],x[10],x[11],x[12],x[13],x[14],x[15]); function colourStep(){ count+=move; if (count >= numdiv.length) {count=0;count_a+=move} if (count_a == CoLoUrS.length) count_a=0; numdiv[count].style.background=CoLoUrS[count_a]; setTimeout('colourStep()',100) } function divmove(){ Ypos = document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8*Math.cos((RunTime)/3)*Math.cos(RunTime/10); Xpos= document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4*Math.sin((RunTime)/5)*Math.sin(RunTime/20); RunTime+=a_StEp; Tma=setTimeout("divmove()", 10); } function overturn(){ for (i=0;i<numdiv.length;i++){ numdiv[i].style.top = Ypos+cntr*Math.cos((currStep + i*4)/10.2)*Math.cos(currStep/10); numdiv[i].style.left= Xpos+cntr*Math.sin((currStep + i*4)/10.2); } currStep+=step; setTimeout("overturn()",10); } function Shrink(){ cntr-=0.5; GoShrink=setTimeout('Shrink()',10); if (cntr <=20){clearTimeout(GoShrink);Swell()} } function Swell(){ cntr+=0.5; GoSwell=setTimeout('Swell()',10); if (cntr >=70){clearTimeout(GoSwell);Shrink()} } function transfer(){ divmove(); //移动层 overturn(); //使层进行翻转 Shrink(); //改变层的大小 colourStep(); //变换层的颜色 } transfer(); </script> </body> </html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.