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 までご連絡ください。

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。