用JavaScript实现烟花效果
2024-05-16 15:00:41
要实现烟花效果之前，我们先得将body的背景设为黑色，这样烟花的效果才能更加明显，下面附上两种烟花效果的代码：
1、自由散落效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 10px;height: 10px;position: absolute;}html,body{height: 100%;overflow: hidden;}</style>
</head>
<body bgcolor="#000"></body>
</html>
<script src="./animation.js"></script>
<script>//思路//给body加点击事件document.onclick = function(e){e = e || window.eventlet mouseX = e.clientXlet mouseY = e.clientY//在底部生成一个div 颜色随机的 x轴 鼠标点击的x轴 y轴为屏幕高度let box = createdDiv()box.style.top = window.innerHeight + "px" //窗口高度box.style.left = mouseX + 'px'document.body.appendChild(box)//添加给对应的body//控制div从底部到达鼠标点击的y轴位置animated(box,{"top":mouseY},function(){//在这个回调里面 原本的div删除 生成更多的div（颜色随机） 位置为鼠标点击的位置 这些div做抛物线运动box.remove()//随机个数let count = randomNumber(15,20)for(let i=0;i<count;i++){let div = createdDiv()// 位置为鼠标点击的位置 div.style.top = mouseY + "px"div.style.left = mouseX + 'px'document.body.appendChild(div)//添加给对应的body//定时器控制div的运动//记录了四个象限// let arr = [{x:randomNumber(-20,-1),y:randomNumber(1,20)},// {x:randomNumber(1,20),y:randomNumber(1,20)},// {x:randomNumber(-20,-1),y:randomNumber(-20,-1)},// {x:randomNumber(1,20),y:randomNumber(-20,-1)}]//随机得到一个象限// let stepPoint = arr[randomNumber(0,3)]// 得到一个随机数来控制x和y 正负let x = randomNumber(0,1)==0?randomNumber(1,20):randomNumber(1,20)*-1let y = randomNumber(0,1)==0?randomNumber(1,20):randomNumber(1,20)*-1let stepPoint = {x,y}let stepY = stepPoint.y //取出y值let timer = setInterval(()=>{//得到当前位置let currentX = parseFloat(div.style.left)let currentY= parseFloat(div.style.top)stepY++div.style.top = currentY + stepY + "px"div.style.left = currentX + stepPoint.x + 'px'//等div的x轴到达0或者x到达屏幕的宽度 或者 y轴到达0 或者y到达屏幕高度的时候 //停止运动 清除divif(currentX<=0 || currentX>= window.innerWidth || currentY <= 0 || currentY >= window.innerHeight){clearInterval(timer)div.remove()}},10)}},40)}// 生成随机颜色function randomColor(min,max){let r = randomNumber(min,max)let g = randomNumber(min,max)let b = randomNumber(min,max)return `rgb(${r},${g},${b})`}//生成区间内容随机数function randomNumber(min,max){return Math.round(Math.random()*(max-min))+min}//生成div给定对应的颜色和位置function createdDiv(){let div = document.createElement('div')div.className = 'box'div.style.backgroundColor = randomColor(100,250)return div}
</script>2、圆形效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 20px;height: 20px;position: absolute;border-radius: 50%;}</style>
</head>
<body bgcolor="#000"></body>
<script src="./animatedPlus.js"></script>
<script>//思路//点击生成一个对应的div 定位放在底下document.onclick = function(e){e = e || window.event//获取点击的位置let mouseY = e.clientYlet mouseX = e.clientXlet box = createdDiv(mouseX,window.innerHeight - 20)//定位在底部document.body.appendChild(box) //将创建的div添加到body中//控制生成的div 升上去animated(box,{"top":mouseY},function(){//回调里面 这个div消失 生成多个divbox.remove() //将自己移除//生成多个divlet count = randomNumber(12,18) //随机生成个数//定义半径 let r = randomNumber(250,500) //随机生成半径for(let i=1;i<=count;i++){ //遍历let div = createdDiv(mouseX,mouseY)//重叠在一块 设置div的位置document.body.appendChild(div) //添加到body中//目标位置 Math.PI 为180deglet targetX = Math.ceil(Math.cos(2*Math.PI/count*i)*r+ parseFloat(div.style.left))let targetY = Math.ceil(Math.sin(2*Math.PI/count*i)*r+ parseFloat(div.style.top))//让这个多个div的位置发生变化animated(div,{"left":targetX,"top":targetY},function(){div.remove() //移除元素})}})}// 生成随机颜色function randomColor(min,max){let r = randomNumber(min,max)let g = randomNumber(min,max)let b = randomNumber(min,max)return `rgb(${r},${g},${b})`}//生成区间内容随机数function randomNumber(min,max){return Math.round(Math.random()*(max-min))+min}//生成div给定对应的颜色和位置function createdDiv(x,y){let div = document.createElement('div')div.className = 'box'div.style.backgroundColor = randomColor(100,250)div.style.left = x + 'px'div.style.top = y + 'px'return div}
</script>
</html>animation.js文件
//方法封装function animated(element,targetObject,callback,speed){//element 变化的元素 传入目标对象 targetObject callback 回调函数clearInterval(element.timer)speed = typeof speed =='number'?speed:0//遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}element.timer = setInterval(()=>{let flag = true for(let key in targetObject){let current = parseFloat(getStyle(element,key))let step = 0let setValue//判断传进来的值if(key=="opacity"){//如果是opacity是使用下面这个//不需要px作为单位//目标元素 targetObject[key] 当前的值 Number(getStyle(element,key)) 步长 step = (parseFloat(targetObject[key])*100-current*100)/10//保证最终达到目标位置}if(key!="opacity" && key!="zIndex"){ //height width left topstep = (targetObject[key]-current)/10}step = step > 0 ?Math.ceil(step):Math.floor(step)if(key=="opacity"){setValue = (current*100+step)/100}else{setValue = current+step+'px'}element.style[key] = setValueif(key=="zIndex"){//如果是层高 直接设置 element.style[key] = targetObject[key]}if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完flag = false}}if(flag){clearInterval(element.timer)typeof callback =='function'?callback():console.log("");}},speed)//callback是所有的这个函数里面所有的事情做完以后做的事情}//获取样式的值function getStyle(element,attr){ //需要获取样式的对象 样式的名字// window.getComputedStyle(element,null)[attr]// element.currentStyle ie的兼容写法//获取样式对象var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStylereturn style[attr]}// 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离function myScoll(){//如果没有滚动栏if(window.pageYOffset!=null){return {"left":window.pageXOffset,"top":window.pageYOffset}}//获取top值let top = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop//获取left值let left = document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft//再返回return {left,top}}animatedPlus.js文件
//方法封装function animated(element,targetObject,callback,speed){//element 变化的元素 传入目标对象 targetObject callback 回调函数clearInterval(element.timer)if(typeof speed !='number'){speed = Number(speed)if(isNaN(speed)){speed = 0}}//遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}element.timer = setInterval(()=>{let flag = true for(let key in targetObject){let current = parseFloat(getStyle(element,key))let step = 0//判断传进来的值if(key=="opacity"){//如果是opacity是使用下面这个//不需要px作为单位//目标元素 targetObject[key] 当前的值 Number(getStyle(element,key)) 步长 step = (targetObject[key]*100-current*100)/10 //保证最终达到目标位置element.style[key] = (current*100+step)/100}if(key=="zIndex"){//如果是层高 直接设置 element.style[key] = targetObject[key]}if(key!="opacity" && key!="zIndex"){ //height width left topstep = (targetObject[key]-current)/10>0?Math.ceil((targetObject[key]-current)/10):Math.floor((targetObject[key]-current)/10)element.style[key] = current+step+'px'}if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完flag = false}}if(flag){clearInterval(element.timer)//执行对应的callbackif(typeof callback =='function'){//如果你是个函数//执行这个函数callback()}}},speed)//callback是所有的这个函数里面所有的事情做完以后做的事情}//获取样式的值function getStyle(element,attr){ //需要获取样式的对象 样式的名字// window.getComputedStyle(element,null)[attr]// element.currentStyle ie的兼容写法//获取样式对象var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStylereturn style[attr]}// 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离function myScoll(){//如果没有滚动栏if(window.pageYOffset!=null){return {"left":window.pageXOffset,"top":window.pageYOffset}}//获取top值let top = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop//获取left值let left = document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft//再返回return {left,top}}用JavaScript实现烟花效果相关推荐
- 庆元旦，放烟花(纯javascript版烟花效果)
转载自:随机博客http://www.cnblogs.com/random/archive/2009/01/01/1366394.html 2008年过去了,新的2009年到来了,2008太不平凡,发 ...
- html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
- JavaScript实现微信聊天烟花效果
微信8.0烟花效果实现 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- java word转html 烟火,Java多线程制作烟花效果.doc
Java多线程制作烟花效果 Java多线程应用实例: 制作烟花效果 本例知识点一句话讲解新学知识使用Thread类管理线程已学知识Math类产生随机数使用Color类设置颜色使用Graphics类绘制 ...
- 十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
- javascript瀑布流效果
javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
- JavaScript 省市级联效果
为什么80%的码农都做不了架构师?>>> JavaScript 省市级联效果 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- C语言用循环写出新年祝福语图案,非常漂亮的新年祝福!C语言实现漂亮的烟花效果...
本文实例为大家分享了C语言实现漂亮的烟花效果展示的具体代码,供大家参考,具体内容如下 程序名称:祝福烟花,祝福朋友 编译环境:VC++6.0 && easyx(立冬版) #includ ...
- 基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果 描述:右侧图片必须是左侧图片的倍数大,主要是获取鼠标相对与被触发元素的坐标位置,再通过位置定位实现效果 <!DOCTYPE html> <ht ...
- 用MVC来实现javaScript的时间效果
用MVC来实现javaScript的时间效果 开发工具与关键技术: MVC javascript 作者:沈金凤 年级:18级(5)班 撰写日期:2019年2月11日 除了再Html中写javaScri ...
最新文章
- AI换脸鉴别率超99.6%，微软用技术应对虚假信息
- ANTS医学影像配准+Li‘s 核磁共振影像数据处理
- micropython安装第三方库_安装第三方模块
- SourceTree 的初次使用的两个小问题
- 这回真要涨工资了！国务院教育督导办：2020年把义务教育教师平均工资收入水平不低于当地公务员作为督导检查重点...
- java sha1_java使用SHA1加密算法详解
- [UE4]把枪抽象为一个类
- 比机器人更优越的半机械昆虫，颜控党们会接受吗？
- 如何在ashx里提取context.Request.Files？
- [Swift]LeetCode862. 和至少为 K 的最短子数组 | Shortest Subarray with Sum at Least K
- 【C#】Skip和Tack方法实现分页
- checking for spandsp ＞= 3.0... configure: error: no usable spandsp； please install spandsp3 devel pa
- 微博java版_新浪微博JAVA通用版
- g4600黑苹果efi_Hackintosh黑苹果长期维护机型EFI列表及安装教程整理
- 数据分析案例-电影数据可视化分析
- 计算机硬盘内存显示是红色,解决 win10 磁盘容量条显示红色问题
- 机器学习（十）——期望值最大算法(EM算法)
- 基于JAVA控制台版本银行自动取款机（修改版）
- 如何在html添加悬浮页面,如何设置悬浮窗口?
- 关于 MyBatis动态sql，这里有 10 种超好用的写法