原生JS实现烟花效果


Posted in Javascript onMarch 10, 2020

原生JS实现烟花效果,点击页面生成烟花,向四周扩散,然后再坠落下去。(这里的烟花我是用的特殊字符爱心形状)

原生JS实现烟花效果

基础css代码

/* 设置基础的css样式 */
 body{background: #000;overflow: hidden;}
 .fire{position: absolute;width: 4px;height: 30px;}

js代码:

1、给页面添加点击事件,生成主体烟花

//给页面设置点击事件
 document.onclick = function(eve){
 var e = eve || window.event;
 //设置一个空数组,用来后面存放小烟花
 var arr = [];
 //获取鼠标点击的位置
 var x = e.clientX;
 var y = e.clientY;
 //设置步长
 var speed = 20;
 //生成大烟花,设置他的css样式,出发点在可视区页面的下方
 var fire = document.createElement('div');
 fire.className = 'fire';
 fire.style.background = randomColor();
 fire.style.left = x + 'px';
 fire.style.top = document.documentElement.clientHeight+'px';
 //将大烟花追加到页面上
 document.body.appendChild(fire);

2、设置定时器,让烟花向上运动,删除

//生成定时器
 var t = setInterval(function(){
 //判断如果大烟花的TOP值小于小于目标值,清除定时器,并且将大烟花清除
 if(fire.offsetTop <= y){
 clearInterval(t);
 document.body.removeChild(fire);
 //执行show(生成小烟花)
 show();
 }
 //让大烟花垂直向上运动
 fire.style.top = fire.offsetTop - speed +'px';
 },30);

3、然后在点击的位置生成小烟花,设置样式

function show(){
 //利用循环,生成50个小烟花,给小烟花添加css属性
 for(var i=0;i<50;i++){
 var sFire = document.createElement('div');
 // sFire.className = 'small-fire';
 sFire.style.left = x +'px';
 sFire.style.top = y +'px';
 // sFire.style.background = randomColor();
 sFire.style.color = randomColor();
 sFire.innerHTML = '❤';
 sFire.style.position = 'absolute';
 //生成随机数
 var a=Math.random()*360;
 sFire.sx = Math.sin(a*180/Math.PI)*20*Math.random();
 sFire.sy = Math.cos(a*180/Math.PI)*20*Math.random();
 //将小烟花追加到页面上
 document.body.appendChild(sFire);
 //将生成的烟花信息都添加到数组中
 arr.push(sFire);
 }
 }

4、设置定时器,让小烟花完成自由落体运动

setInterval(function move(){
 //利用循环一直改变小烟花的位置
 for(var i=0;i<arr.length;i++){
 //设置将每次循环的第i个小烟花的运动范围
 arr[i].style.left = arr[i].offsetLeft + arr[i].sx + 'px';
 arr[i].style.top = arr[i].offsetTop + arr[i].sy + 'px';
 //让烟花垂直方向的位置每次都增加,实现下落效果
 arr[i].sy += 1;
 //判断烟花是否运动出屏幕可视区,如果是,就将它删除
 if(arr[i].offsetLeft<0 || arr[i].offsetLeft > document.documentElement.clientWidth || arr[i].offsetTop > document.documentElement.clientHeight){
 document.body.removeChild(arr[i]);
 // arr.splice(i,1);
 }
 }
 },30)
 }

5、最后别忘了我们的随机数和随机颜色的封装

// 范围随机数
 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)+")";
 }

最后我们的烟花效果就实现了

今天的分享就到这里,希望大家能够喜欢。

更多JavaScript精彩特效分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读取xml
Nov 04 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
JS实现放烟花效果
Mar 10 #Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
浅谈PHP的反射机制
2016/12/15 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python实现的knn算法示例
2018/06/14 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
营业经理岗位职责
2013/11/10 职场文书
实习鉴定范文
2013/12/19 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
村安全生产责任书
2014/08/25 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书