原生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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python绘制雪景图
2019/12/16 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
python中random模块详解
2021/03/01 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
数据库方面面试题
2012/04/22 面试题
什么是抽象
2015/12/13 面试题
教师演讲稿大全
2014/05/16 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
门面租赁合同范文
2019/08/06 职场文书