ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで3次元円の3D変形を実現 example_javascriptスキル
JavaScriptで3次元円の3D変形を実現 example_javascriptスキル
- WBOYオリジナル
- 2016-05-16 15:46:451326ブラウズ
この記事の例では、JavaScript での 3 次元の円の 3D 変換の実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
ここでは、JavaScript を使用して、変形可能な 3 次元の円、Web ページ上の 3D 変化、色の変化する円の特殊効果、Web ページ上の 3D 円の特殊効果を実装します。円上の各点には異なる色があり、黒い Web ページの背景に対してよりはっきりと見えます。
操作効果は以下の通りです:
具体的なコードは次のとおりです:
<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 プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。