JavaScript实现烟花特效(面向对象)
作者:山河不识 发布时间:2024-02-26 22:44:50
标签:js,烟花
本文实例为大家分享了JavaScript实现烟花特效的具体代码,供大家参考,具体内容如下
本特效使用面向对象编程
分析
OOA
点击触发事件
烟花运动分成两个阶段
向上飞
*
OOD
class FireWork{
constructor(){
}
bindEvent(){
let _this = this;
ele.onclick = function(){
//fly结束再去调用boom函数
_this.fly(_this.boom);
}
}
fly(boom){
}
boom(){
}
}
CSS设计实现
CSS代码
*{
margin: 0;
padding: 0;
}
#box{
width:800px;
height:600px;
position: relative;
margin: 100px auto;
background:#000000;
border:2px solid red;
overflow: hidden;
}
.ball{
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
bottom: 0;
}
JS编程实现
javascript代码
<script src="./utils.js"></script>
<script>
//
class FireWork{
constructor(){
this.box = document.getElementById("box");
this.box_offset = {
left : box.offsetLeft,
top : box.offsetTop
}
}
bindEvent(){
let _this = this;
this.box.onclick = function( e ){
e = e || event;
_this.x = e.clientX - _this.box_offset.left;
_this.y = e.clientY - _this.box_offset.top;
_this.fly(_this.boom);
}
}
fly( boom ){
let ele = this.createEle();
let _this = this;
// 放入box之中;
ele.style.left = this.x + "px";
let _left = this.x ;
let _top = this.y ;
animate( ele , {
top : this.y
} , function(){
ele.remove();
_this.boom( _left , _top );
});
}
boom( x , y ){
let r = 100;
let count = 0 ;
let _this = this;
for(let i = 0 ; i < 20 ; i ++){
let ele = this.createEle();
ele.style.left = x +"px";
ele.style.top = y + "px";
let _left = parseInt(Math.cos( Math.PI / 10 * i ) * r ) + x ;
let _top = parseInt(Math.sin( Math.PI / 10 * i ) * r) + y
animate( ele , {
left : _left,
top : _top,
opacity : 0
} , function(){
ele.remove();
})
}
}
createEle(){
let ele = document.createElement("div");
ele.className = "ball";
ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`;
this.box.appendChild( ele );
return ele ;
}
}
new FireWork().bindEvent();
</script>
引用的utils.js文件
function on(dom, event_name, handler_selector, delegation_handler) {
if( typeof handler_selector === "string" && typeof delegation_handler === "function"){
return delegation(dom, event_name, handler_selector, delegation_handler);
}
// 在dom对象里面建立一个事件名 : 事件处理函数对应的数组;
// 判定当前事件处理函数是否在dom对象之中;
var event_type = "_" + event_name;
if (event_type in dom) {
dom[event_type].push(handler_selector);
} else {
dom[event_type] = [handler_selector];
}
// 如果直接用事件名当成对象之中的key值,那么会和原有的dom功能名称冲突;
// 因为特殊的事件名会导致事件无法触发,所以我们在这里要对事件名进行拆分处理;
dom.addEventListener(event_name.split(".")[0], handler_selector)
}
function off(dom, event_name) {
// 获取到dom对象里面事件名对应的一组事件处理函数;
var callback_list = dom["_" + event_name];
// 根据列表里面的所有函数进行事件移除 ;
callback_list.forEach(function (event_handler) {
dom.removeEventListener(event_name.split(".")[0], event_handler);
})
// 清空dom对象里面的事件处理函数组;
dom["_" + event_name].length = 0;
}
function trigger(dom, event_type) {
dom.dispatchEvent(new Event(event_type));
}
function delegation(dom, event_name, selector, event_handler) {
dom.addEventListener(event_name, function (e) {
e = e || event;
var target = e.target || e.srcElement;
while (target !== dom) {
switch (selector[0]) {
case ".":
if (selector.slice(1) === target.className) {
event_handler.call(target , e )
return;
}
case "#":
if (selector.slice(1) === target.id) {
event_handler.call(target, e)
return;
}
default:
if (selector.toUpperCase() === target.nodeName) {
event_handler.call(target, e)
return;
}
}
target = target.parentNode;
}
})
}
function animate( dom , attrs , callback , transition = "buffer", speed = 10 ){
// transition : 有两种动画方式 "buffer" , "liner"
var _style = getComputedStyle( dom );
// - 1. 数据变形 ;
for(var attr in attrs ){
attrs[attr] = {
target : attrs[attr],
now : _style[attr]
}
// - 2. 速度 : 匀速运动速度正负 ;
if( transition === "liner" ){
attrs[attr].speed = attrs[attr].target > attrs[attr].now ? speed : - speed;
}
if( attr === "opacity"){
attrs[attr].target *= 100
attrs[attr].now *= 100
}else{
attrs[attr].now = parseInt(attrs[attr].now)
}
}
// - 关闭开启定时器;
clearInterval( dom.interval );
dom.interval = setInterval( function(){
for(var attr in attrs ){
// 取出当前值和属性值 ;
// attrs[attr].target : 目标值;
// attrs[attr].now : 当前值;
let { target , now } = attrs[attr];
// 缓冲运动时候的速度;
if( transition === "buffer" ){
var speed = (target - now ) / 10 ;
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
}else if(transition === "liner"){
var speed = attrs[attr].speed;
}
if( Math.abs(target - now) <= Math.abs( speed ) ){
if( attr === "opacity"){
dom.style[attr] = target / 100;
}else{
dom.style[attr] = target + "px";
}
delete attrs[attr];
for(var attr in attrs ){
// 如果有数据循环会执行至少一次;
return false;
}
clearInterval(dom.interval);
typeof callback === "function" ? callback() : "";
}else{
now += speed;
if( attr === "opacity"){
dom.style[attr] = now / 100;
}else{
dom.style[attr] = now + "px";
}
// 给对象赋值;
attrs[attr].now = now;
}
}
} , 30)
}
来源:https://blog.csdn.net/ZeroEQ/article/details/119836994
0
投稿
猜你喜欢
- str为字符串s为字符串str.isalnum() 所有字符都是数字或者字母str.isalpha() 所有字符都是字母str.isdigi
- 除了使用pycharm外,还可使用vscode来操作pyqt,方法如下:1. 在vscode中配置相关的pyqt的相关根据自己实际情况修改第
- baselineimport tensorflow.keras.layers as layersbaseline_model = keras
- property() 函数的作用是在新式类中返回属性值。Python中有一个property的语法,它类似于C#的get set语法,其功能
- 前言今天我看到线性规划模型开头的介绍,特别不错,因此,我把它记录下来了,分享给大家在工程技术、经济管理、科学研究、军事作战训练及日常生活等众
- 首先我们一起来看下 Character entities references (HTML Entities)和 Numeric Chara
- 这段时间,关于asp的前途,关于asp的好坏的讨论贴,都有好些了。当然,大家的心都是好的,但是一些朋友说的话,真是让人郁闷。个人觉得,在现在
- 1、块级作用域想想此时运行下面的程序会有输出吗?执行会成功吗?#块级作用域if 1 == 1: name = "lzl"
- 问:我最近升级了一个应用程序,使其可以在 SQL Server 2005 上运行。我利用了允许行长度超出 8,060 个字节这项功能,以便用
- 找到detect.py,在大概113行,找到plot_one_box &
- 之前安装mysql 5.7.12时未做总结,换新电脑,补上安装记录,安装的时候,找了些网友的安装记录,发现好多坑(一)mysql 5.7.1
- 本文实例为大家分享了opencv实现车牌识别的具体代码,供大家参考,具体内容如下(1)提取车牌位置,将车牌从图中分割出来;(2)车牌字符的分
- 表空间概述Oracle的表空间属于Oracle中的存储结构,是一种用于存储数据库对象(如:数据文件)的逻辑空间,是Oracle中信息存储的最
- 在缺失值填补上如果用前后的均值填补中间的均值,比如,0,空,1,我们希望中间填充0.5;或者0,空,空,1,我们希望中间填充0.33,0.6
- 想实现发送邮件需要经过以下几步:1、登录邮件服务器2、构造符合邮件协议规则要求的邮件内容3、发送Python对SMTP支持有smtplib和
- 进行已经矢量化后的字符串数据,可以使用pandas的Series数据对象的map方法。这样,对于未经矢量化的数据也可以先进行数据的矢量化转换
- 创建表格并添加300万数据use StoredCREATE TABLE UserInfo( --创建表id int IDENTITY(1,1
- 前言:在日常开发的过程中,有时候会临时用到一些简单的函数,她们的业务逻辑会相对简单,简单到并不值得让他们留下名字,这个时候,就很值得使用匿名
- 一个写给别人的小代码顺便也贴上来这是一个滑动展示用的小容器通过鼠标移动和离开触发滑动效果<!DOCTYPE html PUBLIC &
- 本文实例讲述了php实现的简单检验登陆类。分享给大家供大家参考。具体如下:<?phpclass checklogin{ v