suchen

Heim >Web-Frontend >js-Tutorial >Javascript realisiert die 3D-Transformation dreidimensionaler Kreise example_javascript skills

Javascript realisiert die 3D-Transformation dreidimensionaler Kreise example_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:46:451285Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierung der 3D-Transformation dreidimensionaler Kreise in JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier verwenden wir Javascript, um dreidimensionale Kreise, die sich verwandeln können, 3D-Änderungen auf der Webseite, farbverändernde Kreisspezialeffekte und 3D-Kreisspezialeffekte auf der Webseite zu implementieren. Jeder Punkt auf dem Kreis hat eine andere Farbe, die vor einem schwarzen Webseitenhintergrund deutlicher zu erkennen ist.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：PhantomJS-Schnellstart-Tutorial (Serverseitiges JavaScript-API-WebKit)_Javascript-KenntnisseNächster Artikel：PhantomJS-Schnellstart-Tutorial (Serverseitiges JavaScript-API-WebKit)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen