Javascript merealisasikan transformasi 3D bagi kemahiran example_javascript bulatan tiga dimensi-tutorial js-php.cn

Javascript merealisasikan transformasi 3D bagi kemahiran example_javascript bulatan tiga dimensi

WBOY

Lepaskan： 2016-05-16 15:46:45

asal

1317 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan transformasi 3D bulatan tiga dimensi dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami menggunakan javascript untuk melaksanakan bulatan tiga dimensi yang boleh berubah, perubahan 3D pada halaman web, kesan khas bulatan berubah warna dan kesan khas bulatan 3D pada halaman web. Setiap titik pada bulatan mempunyai warna yang berbeza, yang boleh dilihat dengan lebih jelas pada latar belakang halaman web hitam.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.