用js实现一个炫酷的烟花效果
我们要理清整个流程的思路。
首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一份飞上天,然后再分散成很多个小烟花,并且每一个小烟花都有不同的样式以及运动方式。
所有整体思路就是先建立一个div作为我们的大烟花,当大烟花运动到我们鼠标点击的位置的时候,大烟花就会消失,然后就会产生更多的小烟花,并且这些小烟花的运动轨迹样式各不相同。
目录
1.建立一块画布(div)用于展示烟花的效果
2.获取节点
3.先实现大烟花(需要调用随机数方法,随机颜色方法,以及运动函数)
3.1首先先设置fire的样式
3.2设置一个随机数和随机颜色的方法(原型对象)
3.3封装一个运动函数(原型对象)
4.小烟花的实现
4.1设置samll-fire的样式
4.2设置小烟花的属性
1.建立一块画布(div)用于展示烟花的效果
/*给画布设置css样式 */
#container {width: 80%;height: 600px;border: 1px red solid;position: relative;margin: 20px auto;cursor: pointer;background: black;}
<!-- 设置一个div --><div id="container"></div>
2.获取节点
//获取节点var app = document.getElementById('container');//给app设置一个绑定事件app.onclick = function(event) {var e = event || window.event//获得鼠标点击的位置的坐标var pos = {cy: e.offsetY,cx: e.offsetX}new Fire(app, pos)}
烟花的实现过程:先实现一个大的div运动到鼠标点击的位置,然后在散开成为很多个div
3.先实现大烟花(需要调用随机数方法,随机颜色方法,以及运动函数)
// 构造函数function Fire(app, pos) {//把属性设置成变量this.app = app;this.pos = pos;//创建一个大的divthis.bf = document.createElement('div');//设置一个类名this.bf.className = 'fire';//设置样式this.bf.style.left = this.pos.cx + 'px';this.bf.style.background = this.getColor();this.app.appendChild(this.bf);//调用运动函数this.move(this.bf, {top: this.pos.cy}, () => {this.bf.remove();this.smallFire();})}
3.1首先先设置fire的样式
这是fire的初始样式
.fire {background: red;position: absolute;/* 设置bottom时,top获取为最大值,减去鼠标点击位置 */bottom: 0px;width: 6px;height: 6px;}
3.2设置一个随机数和随机颜色的方法(原型对象)
//获得一个随机数方法
Fire.prototype.rand = function(min, max) {return Math.round(Math.random() * (max - min) + min);}//获得一个随机颜色的方法Fire.prototype.getColor = function() {let sum = '#';for (let i = 0; i < 6; i++) {sum += this.rand(0, 15).toString(16)}return sum;}
3.3封装一个运动函数(原型对象)
Fire.prototype.move = function(ele, target, cb) {// clearInterval(times);let times = setInterval(function() {// console.log(this);var onOff = true;// 遍历运动的方向和目标for (let attr in target) {// attr 表示运动的属性// console.log(attr);// 获取元素属性的实时值let tmpVal = parseInt(this.getPos(ele, attr))// 计算speed// console.log(tmpVal, attr);let speed = (target[attr] - tmpVal) / 10;// 取整speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);// 停止计时器,当一个属性运动到位置,设置开关状态if (tmpVal == target[attr]) onOff = true;// 让元素动起来ele.style[attr] = tmpVal + speed + 'px';}// 判断开关状态,清除定时器for (var moveAttr in target) {// 如果不相等,就说明有属性没有运动到位置,定时器不能停止if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {onOff = false;break;}}if (onOff) {clearInterval(times);cb && cb();}// console.log(1111);}.bind(this), 30)}// 获取元素的实时位置的函数Fire.prototype.getPos = function(obj, attr) {if (obj.currentStyle) { // 获取css的样式return obj.currentStyle[attr];} else {return getComputedStyle(obj)[attr]}}
通过以上几个步骤我们就可以得到大烟花的运动轨迹,大烟花运动到指定位置后就会消失,并且从消失的地方产生许多小烟花。由前面的分析可以知道,小烟花的运动轨迹和样式各不相同,接下来就是小烟花的实现
4.小烟花的实现
4.1设置samll-fire的样式
这是samll-fire的初始属性
.small-fire {width: 10px;height: 10px;position: absolute;border-radius: 50%;}
4.2设置小烟花的属性
//小烟花Fire.prototype.smallFire = function() {//首先我们设置小烟花的数量let num = this.rand(50, 60)//遍历 给每一个小烟花设置不同的样式for (let i = 0; i < num; i++) {let sf = document.createElement('div');sf.className = 'small-fire';sf.style.left = this.pos.cx + 'px';sf.style.top = this.pos.cy + 'px';sf.style.background = this.getColor();//console.log(sf);//追加到页面中this.app.appendChild(sf);//使小烟花的运动轨迹成圆周运动//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;//var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;//给小烟花一个随机的位置,可以是在画布里面的任意一个位置let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth);//调用运动函数this.move(sf, {top: top,left: left}, function() {sf.remove();})}}
用js实现一个炫酷的烟花效果相关推荐
- 不到30行 JS 实现一个炫酷的全景交互
点击上方"前端开发博客",选择"设为星标" 回复"2"加入前端群 前言:本文将围绕:了解什么是全景 --> 怎么构成全景 --> ...
- css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
- 元旦到了,手把手教你用 Python 制作一个炫酷烟花秀
大家好,我是小张, 今天是2021 的最后一天,到了这个时间点,部分小伙伴已经开始复盘这一年的得与失.比如今年增加了多少技能点,看了多少本书,写了多少篇文章或者年前的小目标实现进度大概多少等等:做一个 ...
- 动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效
Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件.您通过简单的配置,既可以生成非常炫酷的半透明模糊的毛玻璃效果. 使用方法 在HTML文件中引入. HTML结构 创建HTML结构并使 ...
- 如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...
- 基于three.js的3D炫酷元素周期表
最近在学习three.js在拿example中的项目练手,用了一整天的时间模仿了一个炫酷的元素周期表,在原有的基础上进行了一些改变.下面我会逐步讲解这个项目,算是加深理解,让大家提提意见. 因为我未搭 ...
- html炫酷边框样式,利用SVG和CSS3来实现一个炫酷的边框动画
这篇文章主要介绍了利用SVG和CSS3来实现一个炫酷的边框动画,不使用JavaScript使得编写过程轻松了不少,需要的朋友可以参考下 今天我们来探索一下Carl Philipe Brenner的网站 ...
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- 一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单
高仿雷达扫描效果和仿水波纹中心扩散效果,手把手教你撸一个炫酷的自定义view. 于亚豪的博客地址: blog.csdn.net/androidstar- 我们先看效果图吧 Markdown Markd ...
最新文章
- php自定义函数格式化,PHP自定义函数格式化json数据实例
- Struts2 + uploadify 多文件上传完整的例子!
- Jupyter Notebook修改默认工作路径
- 移动银行木马活跃度升级 恐成黑客攻击跳板
- varchar 保存英文中文区别。
- 《TableStore最佳实践:GEO索引打造店铺搜索系统》
- 编译运行BSR/bench源码
- 爬取糗事百科1到5页的图片并下载到本地
- Http代理抓包 Fiddler与Charles
- 如何看oracle 删除完全,怎么查看以前Oracle卸载干净没?
- PSP游戏下载地址大全
- Excel游戏—制作数字炸弹小游戏
- Python学习笔记-数据类型(元组 tuple)
- Connection reset executing
- python自动控制程序_使用 Python 自动执行 ANSYS APDL
- 在eclipse上运行html文件
- 工欲善其事,必先利其器之-mac下使用zsh
- Android 开发高手课 课后练习(1 ~ 5)
- 【linux系统故障】- Error getting authority: Error initializing authority: Could not connect: No such file
- 库克暗示观念差异阻碍苹果和Facebook合作