介绍//, d1
css/* */div {
,高度:4 px;
,宽度:4 px;
,背景:红色;
,位置:绝对;
}//js
var div =, . getelementbyid (& # 39; div # 39;);,//,画运动点
document.getElementsByTagName(& # 39;身体# 39;)[0].appendChild (tdiv);,//,添加节点
var deg =, 0,,//,运动角度
var r =, 100,,//,半径
var center =,(300,, 300),//,圆的心
var dd =, Math.PI/,//, 180;π和角度之间的转换
setInterval(函数(){
,度+ +;=,div.style.left 中心[0],+,Math.cos (deg *, dd), *, r +, & # 39; px # 39;;=,div.style.top 中心[1],+,sin (deg *, dd), *, r +, & # 39; px # 39;;
},16); //, d2
var divs =,[];,//,保存烟花节点
var len =, 10;,//,烟花节点个数
var temp =, 360,/, len;,//,运动轨迹所隔角度
(var 小姐:=,0;,小姐:& lt;, len;,我+ +){
,var tdiv =, document.createElement (& # 39; div # 39;);
r, var tr1 =,,,//,半径
,var deg =,小姐:*,临时,,//,当前轨迹所在的角度值
,var left =,中心[0],+,Math.cos (deg *, dd), * tr1
,var topLen =,中心[1],+,sin (deg *, dd), * tr1=,,tdiv.style.left left + & # 39; px # 39;;=,,tdiv.style.top topLen + & # 39; px # 39;;=,{,tdiv.data ,//存放节点的位置信息
,deg :度,
,r : tr1,
,left :左,
:,top topLen
,};
,document.getElementsByTagName(& # 39;身体# 39;)[0].appendChild (tdiv);
,divs.push (tdiv);
} //, d3
function getRanR (a, b){//大敌;随机得到a - b的值
,return Math.floor (math . random () * (b + 1) +一个);
} /* css */div {
,高度:4 px;
,宽度:4 px;
,背景:红色;
,位置:绝对;
,转型:1 s ,,//,就添加这一句
}//js
时间=tdiv.style.left 中心[0],+ & # 39;px # 39;;
时间=tdiv.style.top 中心[1],+ & # 39;px # 39;; document.onclick =, function (), {
,(var 小姐:=,0;,小姐:& lt;, divs.length;,我+ +){
,divMove (div[我])
,}
}
function divMove (div) {
,var data =, div.data;=,,div.style.left data.left +, & # 39; px # 39;;=,,div.style.top data.top +, & # 39; px # 39;;
} & lt; html>
& lt; head>
,& lt; meta charset=皍tf-8"比;
,& lt; style>
,* {
,填充:0;
,保证金:0;
,}
,div.boom-div {
,高度:4 px;
,宽度:4 px;
,背景:橙色;
,位置:绝对;
,这个特性:50%;
,}
容器,# {
,宽度:100%;
,高度:100%;
,位置:相对;
,}
,.input-container {
,位置:绝对;
,z - index: 1;
,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; div 类=癷nput-container"比;
,& lt; input id=皉epaint",类型=癰utton",价值=https://www.yisu.com/zixun/爸鼗妗?
小编给大家分享一下js模拟如何实现烟花特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
如下图
首先描绘圆周运动
以上代码运行后可以看到一个圆周运动红色方块
完成上述步骤后,有什么用呢?
烟花的绽放,想象一下,可以当成很多方块从一个从圆心开始向四周扩算的一种运动方式。
一束烟花,有10个绽放点,那就是每隔360/10=36度,就有一条运动轨迹。
这样就好办了
上述代码运行后可以看到
看起来是有点烟花的意思了,但是烟花的运动轨迹可没这么工整,同一个地点出发,同一个地点结束。
而这个结束点就是半径的长度值,所以只需将半径进行变化就可打乱。
将为循环里的tr1改为getRanR (0200);
就可看到下图,
看着很乱,完全没点烟花的样子,没关系,让它运动起来就可以看出来了。
为了让这个动起来就要让上面d2的js代码进行修改。让各个节点的起始位置为圆心。同时为了省点力,用css3进行运动。
运动轨迹从d2可以看出来已经全部存放到了节点里。用div可以拿到各个节点。所以只需操作div就可以了
运动如下图:
这样就可以看到一个简易的烟花效果。就这么一个简易的烟花连续起来就可达到图1的效果。
所以首先要对这个简易的烟花效果进行封装。
动画方面为了方便操作,所以引入jquery。
以下为html + css
