js简易烟花demo

思路

添加夜空的大div
在夜空中获取鼠标的位置，添加点击事件
小烟花的位置就是鼠标x轴的位置，再从最底下缓缓升起，可以用到动画分装函数，改变y轴的值，小div到指定位置后删除

在小div删除后同一位置

<script>function Fireworks(classname) {// 创建大盒子做夜空this.nightSky = document.createElement('div')document.body.append(this.nightSky)this.setStyle(this.nightSky, {width: '1000px',height: '500px',border: '5px solid lightBlue',backgroundColor: '#000',position: 'relative'})this.bindEvent()}// 绑定事件Fireworks.prototype.bindEvent = function () {this.nightSky.onclick = () => {// 获取鼠标位置var x = window.event.offsetXvar y = window.event.offsetY// 创建小divvar div=document.createElement('div')this.nightSky.appendChild(div)this.setStyle(div, {width: '10px',height: '10px',backgroundColor: this.getColor(),position: 'absolute',left: x + 'px',bottom: 0})// 运用动画让小div上升到空中this.animate(div,{top:y},()=>{// 将原来的div删除this.nightSky.removeChild(div)var num=this.getRandom(20,40)for(let a=0 ;a<num;a++){// 创建很多小divlet fire=document.createElement('div')this.nightSky.appendChild(fire)// 设置样式this.setStyle(fire,{width:'10px',height:'10px',borderRadius:'50%',backgroundColor:this.getColor(),position:'absolute',left:x+'px',top:y+'px'})// 随机位置this.animate(fire,{left:this.getRandom(this.nightSky.clientWidth),top:this.getRandom(this.nightSky.clientHeight)},()=>{this.nightSky.removeChild(fire)})}})}}//获取随机颜色Fireworks.prototype.getColor = function() {var color = '#'for(var a=0; a<3; a++) {var num = this.getRandom(256)var bu = num.toString(16)// 当随机数为各位时，在前面补0bu = bu.length === 1 ? '0' + bu : bucolor += hex}return color
}//动画函数Fireworks.prototype.animate = function (ele, obj, fn = function () {}) {let k = 0for (let key in obj) {k++let target = obj[key]let currentStyle = getComputedStyle(ele)[key]if (key === 'opacity') {currentStyle *= 100target *= 100}currentStyle = parseInt(currentStyle)let timer = setInterval(function () {let speed = (target - currentStyle) / 20currentStyle += speed > 0 ? Math.ceil(speed) : Math.floor(speed)if (key === 'opacity') ele.style[key] = currentStyle / 100else ele.style[key] = currentStyle + 'px'if (currentStyle === target) {clearInterval(timer)if (--k === 0) fn()}}, 20)}}//随机数的函数Fireworks.prototype.getRandom = function(a, b = 0) {return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b)
}// 样式Fireworks.prototype.setStyle = function (ele, obj) {for (var key in obj) {ele.style[key] = obj[key]}}var f = new Fireworks('box')</script>

会出现很多个小div，随机颜色，随机位置

js简易烟花demo相关推荐

用p5.js制作烟花特效
前言之前看过一篇文章,使用processing制作烟花特效.效果如下网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的 ...
js按键处理demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
kafaka生产者消费者demo（简易上手demo）
kafaka生产者消费者demo(简易上手demo) 文章目录 kafaka生产者消费者demo(简易上手demo) 导包 kafka官方client spring官方template spring官 ...
html5 拖拽滚动条,js 简易版滚动条实例(适用于移动端H5开发)
废话不多说,直接上代码滑动条 *{ margin: 0; padding: 0; } #content{ margin-top: 50px; width:100%; height: 200px; b ...
html加css加js制作的烟花,js实现烟花特效
本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加c ...
d3.js 简易柱形图，入门demo
<script>var width = 400;var height = 400;//创建画布var svg = d3.select('body').append('svg').attr( ...
d3.js 实现烟花鲜果
今天在d3.js官网上看到了一个烟花的DEMO,是canvas制作的,于是我想用d3.js来实现它,js代码只有几行.好了废话不多说,先上图. 1 js 类因为烟花要有下落的效果,所以里面用到了一些 ...
小程序纯js模拟烟花特效
如下图首先描绘圆周运动 // d1 /*css*/ div{height: 4px;width: 4px;background: red;position: absolute; } //js var ...
vue.js中文社区Demo：vue全家桶，muse-ui
入坑Vue,参考 <基于vue-cli.Vue2.0 构建的单页面应用> 自己撸了一个vue.js中文社区的Demo. demo 地址 demo 项目代码代码技术栈 vue2x vue ...

js简易烟花demo

js简易烟花demo相关推荐

最新文章

热门文章