js实现烟花效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 80%;
height: 600px;
border: 2px solid red;
background: #000;
margin:20px auto;
cursor: pointer;
position: relative;
left: 0;
top: 0;
overflow: hidden;
}
.fire{
width: 10px;
height:10px;
position: absolute;
bottom: 0;
}
.small-fire{
width: 10px;
height:10px;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script src="../move.js"></script>
<script> function Fire(options){
this.x = options.x;
this.y = options.y;
this.cont = options.parent; // 1.创建主体烟花，设置样式，位置
this.init()
}
Fire.prototype.init = function(){
// 主体烟花，设置样式，位置
this.ele = document.createElement("div");
this.ele.className = "fire";
this.ele.style.left = this.x + "px";
this.ele.style.background = randomColor();
this.cont.appendChild(this.ele) // 2.开始运动，运动结束
this.animate()
}
Fire.prototype.animate = function(){
// 开始运动。。。
move(this.ele,{
top:this.y
},function(){
// 删除主体烟花
this.ele.remove()
// 3.创建小烟花
this.createSmall()
}.bind(this))
}
Fire.prototype.createSmall = function(){
// 创建小烟花,运动，删掉
var num = random(10,20); // 1.随机的半径
var r = random(100,200);
console.log(num)
for(var i=0;i<num;i++){
let div = document.createElement("div");
div.className = "small-fire";
div.style.background = randomColor();
div.style.left = this.x + "px";
div.style.top = this.y + "px";
div.setAttribute("i",i);
this.cont.appendChild(div); // 2.利用三角函数，计算出一个圆上面平均分布的点的坐标
// 注意三角函数的方法接收的是弧度：别忘记角度转弧度
var l = parseInt(Math.cos( Math.PI/180 * (360/num * i)) * r) + this.x;
var t = parseInt(Math.sin( Math.PI/180 * (360/num * i)) * r) + this.y; move(div,{
left:l,
top:t
},function(){
div.remove()
}) }
} // for(){
// ali[i] = i
// ali[i].onclick = function(){
// this
// }
// } // 范围随机数
function random(max,min){
return Math.round(Math.random()*(max-min)+min);
} // 随机颜色
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
} var ocont = document.getElementById("container");
ocont.onclick = function(eve){
var e = eve || window.event;
new Fire({
x:e.offsetX,
y:e.offsetY,
parent:this
});
} </script>
</html>
//移动
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
js实现烟花效果的更多相关文章
- js制作烟花效果
<html> <head> <link type="text/css" rel="stylesheet" href="c ...
- 『HTML5梦幻之旅』-缤纷多姿的烟花效果
天花无数月中开,五采祥云绕绛台.堕地忽惊星彩散,飞空旋作雨声来.怒撞玉斗翻晴雪,勇踏金轮起疾雷.更漏已深人渐散,闹竿挑得彩灯回. ——明·瞿佑·<烟火戏> 记得每年过春节的那段时间,除了欣 ...
- WEB烟花效果——Canvas实现
摘要 本文主要介绍一种WEB形式的烟花(fireworks)效果(图1所示),该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
随机推荐
- CF999C Alphabetic Removals 思维 第六道 水题
Alphabetic Removals time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- MyCat数据库的基础配置及使用
一.为什么需要分布式数据据库 随着计算机和信息技术的迅猛发展,行业应用系统的规模迅速扩大,行业应用所产生的数据量呈爆炸式增长,动辄达到数百TB甚至数百PB的规模,已远远超出传统计算技术和信息系统的处理 ...
- 【Nginx】基础学习概览【汇总】
一.Nginx 简介安装启动 二.Nginx的应用场景 三.Nginx中的配置命令 四.实现动态负载均衡 五.四层负载均衡 六.主从热备 七.动静分离 一.Nginx 简介安装启动 [Nginx]简介 ...
- 【Redis】SpringBoot+Redis+Ehcache实现二级缓存
一.概述 1.1 一些疑惑? 1.2 场景 1.3 一级缓存.两级缓存的产生 1.4 流程分析 二.项目搭建 一.概述 1.1 一些疑惑? Ehcache本地内存 Redis 分布式缓存可以共享 一级 ...
- top_down设计技巧
写在前面的话 之前梦翼师兄和大家一起学习了层次化设计方法,大家应该懂了,哦,原来所谓的层次化设计就是将一个大的系统不断地拆分成一些便于实现的最小逻辑单元.如果大家真的只是这么想的话,那么梦翼师兄真的是 ...
- Go语言基础之文件操作
本文主要介绍了Go语言中文件读写的相关操作. 文件是什么? 计算机中的文件是存储在外部介质(通常是磁盘)上的数据集合,文件分为文本文件和二进制文件. 打开和关闭文件 os.Open()函数能够打开一个 ...
- java字符串加密解密
java字符串加密解密 字符串加密解密的方式很多,每一种加密有着相对的解密方法.下面要说的是java中模拟php的pack和unpack的字符串加密解密方法. java模拟php中pack: /** ...
- 浅谈独立特征（independent features）、潜在特征（underlying features）提取、以及它们在网络安全中的应用
1. 关于特征提取 0x1:什么是特征提取 特征提取研究的主要问题是,如何在数据集未明确表示结果的前提下,从中提取出重要的潜在特征来.和无监督聚类一样,特征提取算法的目的不是为了预测,而是要尝试对数据 ...
- 前后端分类状态下SpringSecurity的玩法
前后端分离状态下,后端SpringSecurity该如何变动呢? 如何变动取决于前后端分离状态下,前后端交互的特点,纯json交互,闲言少叙,上干货 主配置类 @Configuration @Enab ...
- 解析 HTTP 请求 header 错误
1.org.apache.coyote.http11.Http11Processor.service 解析 HTTP 请求 header 错误 2.原因:在创建项目名称的时候,文件名不能带有中文,只能 ...