标签：function 特效 attr 元素 烟花 ele 面向对象 var JS
基本效果如图：
这里的烟花特效 是配合鼠标点击去实现的 (你要是想绑定别的事件也可)
- 创建一个烟花，从底部升起运动到目标位置
- 到达目标位置之后，删除它的同时 炸出一堆烟花
HTML布局+CSS样式
<div class="container"></div>
1 <style>
2 .container{
3 width: 80%;
4 height: 300px;
5 border: 2px solid red;
6 background: #000;
7 margin:20px auto;
8 cursor: pointer;
9 position: relative;
10 left: 0;
11 top: 0;
12 overflow: hidden;
13 }
14 .fire{
15 width: 10px;
16 height:10px;
17 position: absolute;
18 bottom: 0;
19 }
20 </style>
JavaScript 代码
1 <script>
2 // OOA
3 // 1.创建一个烟花元素
4 // 2.元素运动 运动结束之后删除
5 // 3.烟花爆炸 循环多个烟花 爆炸之后也要删除
6 // 4.随机位置
7 // 5.烟花的随机颜色
8 // OOD
9 // function Firework(x,y){
10 // this.init(x,y);
11 // }
12
13 // Firework.prototype = {
14 // constructor : Firework,
15 // // 初始化
16 // init : function(x,y){//xy是目标位置
17 // // 创建元素
18 // // 元素运动 把目标点当做参数x、y
19 // // 调用函数
20
21 // },
22 // // 1.创建元素
23 // createFireWorkEle : function(){
24
25 // },
26 // // 2.元素运动
27 // fireWorkUp : function(ele){
28 // // 2部分运动 left直接到达、top运动达到
29 // },
30 // // 3.烟花爆炸
31 // fireWorkBlast : function(){
32 // // 3.1创建非常多的元素
33 // },
34 // // 4.随机位置
35 // randomBoundary : function(){
36
37 // },
38 // // 5.随机颜色
39 // randomColor : function(ele){
40
41 // }
42 // }
43
44 // OOP
45 function Firework(x,y , selector){
46 // 选择父级元素
47 this.main = document.querySelector(selector);
48
49 this.init(x,y);
50 }
51
52 Firework.prototype = {
53 constructor : Firework,
54 // 初始化
55 init : function(x,y){
56 //x、y是点击事件创建的烟花的位置
57 this.x = x;
58 this.y = y;
59
60 // 创建元素
61 this.ele = this.createFireWorkEle();
62 // 爆炸烟花的随机位置 最大值
63 this.left_max = this.main.offsetWidth - this.ele.offsetWidth;
64 this.top_max = this.main.offsetHeight - this.ele.offsetHeight;
65
66 // 元素添加背景色
67 this.randomColor(this.ele);
68 // 烟花主体升起
69 this.fireWorkUp(this.ele );
70 // 烟花爆炸
71 this.fireWorkBlast(this.ele);
72 },
73 // 1.创建元素
74 createFireWorkEle : function(){
75 // 往containe里面放进一个烟花fire
76 var ele = document.createElement("div");
77 ele.className = "fire";
78 // 在页面显示
79 this.main.appendChild(ele);
80 return ele;
81 },
82 // 2.元素运动
83 fireWorkUp : function(ele){
84 // 两部分的运动 left直接到达、top运动达到
85 ele.style.left = this.x + "px";
86 animate(ele, {top : this.y} , function(){
87 // 烟花运动结束后 要删除它
88 // console.log(this);//这时候指向windoe，用bind修改指向
89 ele.remove();
90 // 然后调用烟花爆炸
91 this.fireWorkBlast();
92 }.bind(this));
93 },
94 // 3.烟花爆炸
95 fireWorkBlast : function(){
96 // 3.1创建非常多的元素
97 for(var i = 0 ; i < 20 ; i ++){
98 var ele = this.createFireWorkEle();
99 this.randomColor(ele);
100 // 3.1初始样式设置
101 ele.style.left = this.x + "px";
102 ele.style.top = this.y + "px";
103 // 和点击之后创建的烟花 区分开
104 ele.style.borderRadius = "50%";
105 // 3.3让元素有运动目标
106 animate(ele , this.randomBoundary(ele) , function(callback_ele){
107 // 爆炸之后删除所有元素
108 // 用bind 给每个匿名函数都绑定一个ele。否则只会删除最后一个ele
109 callback_ele.remove();
110 }.bind(this , ele));
111 }
112 },
113 // 4.随机位置
114 randomBoundary : function(){
115 // min 是0
116 // max中offset性能消耗大，所以放在init()里，只获取一次即可
117 return{
118 left : parseInt(Math.random()*(this.left_max + 1)),
119 top : parseInt(Math.random()*(this.top_max + 1))
120 }
121 },
122 // 5.随机颜色
123 randomColor : function(ele){
124 // 随机颜色方法很多
125 var r = parseInt(256 * Math.random());
126 var g = parseInt(256 * Math.random());
127 var b = parseInt(256 * Math.random());
128 var random_color = "rgb("+r + "," + g + "," + b +")";
129 return ele.style.backgroundColor = random_color;
130
131 }
132 }
133
134 document.querySelector(".container").addEventListener("click",function(evt){
135 var e = evt || event;
136 new Firework(e.offsetX , e.offsetY , ".container");
137 })
138 </script>
<script>引入的 "animate.js" 运动封装
1 // 元素，属性，回调函数（动画执行结束，调用这个函数）
2 function animate( ele , attr_options , callback ){
3 // 获取当前属性
4 for(var attr in attr_options){
5 // 同时判断是否是opacity属性
6 attr_options[attr] = {
7 // 目标点(传入的数据)
8 target : attr === "opacity" ? attr_options[attr] * 100 : attr_options[attr],
9 // 元素当前的属性值
10 iNow : attr === "opacity" ? parseInt( getComputedStyle(ele)[attr] * 100 ) : parseInt( getComputedStyle(ele)[attr])
11 }
12 }
13 // 定时器的开启和关闭
14 clearInterval( ele.timer );
15 ele.timer = setInterval( function(){
16 // 获取运动所必须的值
17 for(var attr in attr_options){
18 // 取出每一条数据
19 var item = attr_options[attr];
20 // console.log(item , attr);//target和iNow , "属性名"
21 var target = item.target;
22 var iNow = item.iNow;
23 // 计算速度
24 var speed = (target - iNow) / 10;
25 // 速度取整
26 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
27 // 运动的终止条件
28 // (目标 - 当前位置) 的绝对值 <= 速度 , 此时判定已经到达
29 if( Math.abs( target - iNow) <= Math.abs(speed) ){
30 // 送他到底目标点
31 ele.style[attr] = attr === "opacity" ? target / 100 : target + "px";
32 // if里的终止条件不严谨:
33 // 因为目标的不一致会让运动次数执行不同，有可能会提前关闭定时器
34 // 解决办法：完成一条运动后 删除对象里的数据
35 delete attr_options[attr];
36
37 for(var num in attr_options){
38 // 如果attr_options里面有属性,不终止定时器
39 return false;
40 }
41 // 如果对象里面没有属性了，就可以关闭定时器
42 clearInterval(ele.timer);
43 // 可能会不传callback
44 typeof callback === "function" ? callback() : "";
45 }else{
46 // 元素继续运动
47 // 如果直接设置iNow 每次循环iNow都会被重置，iNow是一个临时变量
48 // 所以不能去操作iNow，要去操作iNow的数据源
49 attr_options[attr].iNow += speed;
50 ele.style[attr] = attr === "opacity" ? attr_options[attr].iNow / 100 : attr_options[attr].iNow + "px";
51 }
52 }
53 } , 30)
54 }
标签：function,特效,attr,元素,烟花,ele,面向对象,var,JS 来源： https://www.cnblogs.com/uuind/p/12544157.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。