VMLテクノロジー_JavaScriptスキルに基づくJS五芒星花火エフェクトコード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

VMLテクノロジー_JavaScriptスキルに基づくJS五芒星花火エフェクトコード

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:35 PM

jsVML

この記事の例では、VML テクノロジーに基づいて JS によって実装された五芒星の花火エフェクトコードについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

ここで紹介する五芒星の花火は、HTML js VML テクノロジーに基づいて共同で作成および実装されています。ページを開くと、五芒星のシンボルは他のシンボルに置き換えることができます。このエフェクトは、花火が打ち上げられて爆発する特殊なエフェクトに簡単に変更できますが、事前に花火の小さな GIF を作成してから、五芒星を置き換える必要があります。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-vml-wjx-style-demo/

具体的なコードは次のとおりです:

<HTML>
<HEAD>
<TITLE>五角星礼花</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>
<TABLE borderColor=#00FF00 border=5 borderlight="green">
 <TBODY>
 <TR>
 <TD align=middle><!--[if IE ]>
   <STYLE type=text/css>BODY {
    OVERFLOW: hidden
}
v\:* {
    BEHAVIOR: url(#default#VML)
}
</STYLE>
<![endif]--><!--[if IE ]>
<SCRIPT language=JavaScript>
colors = new Array();
colors[0] = new Array('yellow', 'lime');
colors[1] = new Array('silver', 'green')
colors[2] = new Array('silver', 'blue');
colors[3] = new Array('silver', 'purple');
colors[4] = new Array('purple', 'white');
colors[5] = new Array('blue', 'silver');
colors[6] = new Array('red', 'fuchsia');
colors[7] = new Array('yellow', 'red');
// Define the maximum number of fire arrows
maximum = 1000;
vmlobj=''; 
 for(i = 0; i < 12; i++){ 
 vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
 vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
 vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
 vmlobj += '<v:stroke on="false" /></v:shape></div>';
 }
document.write(vmlobj); vmlobj = null;
aantal = 0;
function begin()
{
try {
 if(aantal == maximum){ return;}
 kleurschema = Math.floor(Math.random() * colors.length);
 posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
 posLinks = (posLinks < 170)&#63; 170: posLinks;
 posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
 posBoven = (posBoven < 170)&#63; 170: posBoven;
 straal = 0; uiteen = true; teller = 1; flikkereffect = false;
 for(var i = 0; i < 12; i++){
 document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
 document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
 document.getElementById('ster'+i).style.left = posLinks;
 document.getElementById('ster'+i).style.top = posBoven;
 }
 document.getElementById('ster0').style.top = (document.body.clientHeight - 20); 
 document.getElementById('ster0').style.visibility = 'visible';
 omhoog();
} catch(e){}
}
function omhoog()
{
try {
 positie = parseInt(document.getElementById('ster0').style.top);
 if(positie > posBoven){
 document.getElementById('ster0').style.top = (positie - 25); 
 setTimeout('omhoog()', 50);
 } else {
  for(i = 1; i < 12; i++){
  document.getElementById('ster'+i).style.top = positie;
  document.getElementById('ster'+i).style.visibility = 'visible';
  } 
 uiteenspatten();
 }
} catch(e){}
}
function uiteenspatten()
{
try {
 if(straal > 120 && straal % 10 == 0){ 
 flikkereffect = true;
 teller = (teller == colors[kleurschema].length)&#63; 0: (teller+1);
 }
 for(var i = 0; i < 12; i++){
 var hoek = i * 30; 
 var piHoek = Math.PI - Math.PI / 180 * hoek;
 var links = posLinks + Math.round(straal * Math.sin(piHoek)); 
 var boven = positie + Math.round(straal * Math.cos(piHoek));
 document.getElementById('ster'+i).style.left = links;
 document.getElementById('ster'+i).style.top = boven;
 if(flikkereffect){
 document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
 }
 }
 if(straal < 160 && uiteen){
 straal += (straal < 120)&#63; 10: 5;
 setTimeout('uiteenspatten()', 50);
 }
 else if(straal > 120){
 uiteen = false; straal -= 5;
 setTimeout('uiteenspatten()', 50);
 }
 else if(straal <= 120){
 for(var i = 0; i < 12; i++){
 document.getElementById('ster'+i).style.visibility = 'hidden';
 }
 aantal++;
 setTimeout('begin()', 500);
 }
} catch(e) {}
}
window.onload=begin;
</SCRIPT>
<![endif]--></TD></TR></TBODY></TABLE></CENTER>
</BODY>
</HTML>

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles