面向对象烟花小案例

最新推荐文章于 2022-12-30 15:10:08 发布

V472482414

最新推荐文章于 2022-12-30 15:10:08 发布

阅读量166

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/desLZW/p/11496347.html

版权

JS基于面向对象实现的放烟花效果

效果显示（上升图片）：

效果显示（绽放图片）：

效果显示（视频）：

OOA
1.选中元素,点击事件,记录鼠标位置
2.创建主体烟花
3.初始化主体烟花
4.主体烟花运动
OOD
选中元素,点击事件,记录鼠标位置

//主体部分

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         #container{
  8             width: 80%;
  9             height: 600px;
 10             border: 2px solid red;
 11             background: #000;
 12             margin:20px auto;
 13             cursor: pointer;
 14             position: relative;
 15             left: 0;
 16             top: 0;
 17             overflow: hidden;
 18         }
 19         .fire{
 20             width: 10px;
 21             height:10px;
 22             position: absolute;
 23             bottom: 0;
 24         }
 25         .small-fire{
 26             width: 10px;
 27             height:10px;
 28             position: absolute;
 29             border-radius: 50%;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <div id="container"></div>
 35 </body>
 36 <script src="move.js" type="text/javascript" charset="utf-8"></script>
 37 <script type="text/javascript">
 38 //     OOA
 39 //     1.选中元素,点击事件,记录鼠标位置
 40 //     2.创建主体烟花
 41 //     3.初始化主体烟花
 42 //     4.主体烟花运动
 43 //     OOD
 44 //     选中元素,点击事件,记录鼠标位置
 45     var ocont = document.getElementById("container");
 46     ocont.onclick = function(){
 47         //记录鼠标位置
 48         new Fire();
 49     }
 50     
 51     function Fire(){
 52 //        创建主体烟花
 53         this.init()
 54     }
 55     
 56     Fire.prototype.init = function(){
 57 //        初始化主体烟花
 58         this.move();
 59     }
 60     Fire.prototype.move = function(){
 61 //        主体烟花运动
 62     }
 63     
 64 //    OOP
 65     window.onload = function(){
 66         var ocont = document.getElementById("container");
 67         ocont.onclick = function(eve){
 68             //记录鼠标位置
 69             var e = eve || window.event;
 70             var target = {
 71                 left:e.offsetX,
 72                 top:e.offsetY
 73             }
 74             new Fire(target,this);
 75         }
 76     }
 77     
 78     function Fire(target,parent){
 79 //        创建主体烟花
 80         this.parent = parent;
 81         this.target = target;
 82         this.ele = document.createElement("div");
 83         this.init();
 84     }
 85     
 86     Fire.prototype.randomColor = function(){
 87         var r = Math.round(Math.random()*255).toString(16);
 88         var g = Math.round(Math.random()*255).toString(16);
 89         var b = Math.round(Math.random()*255).toString(16);
 90         return "#"+this.zero(r)+this.zero(g)+this.zero(b);
 91     }
 92     Fire.prototype.zero = function(n){
 93         if(n<10 || n.length == 1){
 94             return "0" + n;
 95         }else{
 96             return n;
 97         }
 98     }
 99     Fire.prototype.init = function(){
100 //        初始化主体烟花
101         this.ele.className = "fire";
102         this.ele.style.background = this.randomColor();
103         this.ele.style.left = this.target.left + "px";
104         this.parent.appendChild(this.ele);
105         this.move();
106     }
107     
108     Fire.prototype.move = function(){
109 //        主体烟花运动
110         move(this.ele,this.target,function(){
111             this.ele.remove(),
112             this.smallFire()
113         }.bind(this));
114     }
115     
116 //    1.主体烟花消失后显示小烟花
117 //    2.将小烟花的初始位置放在鼠标单击的位置(主体烟花消失的位置)
118 //    3.让小烟花在画布中运动到随机位置
119 //        3.1 做圆周运动
120     Fire.prototype.smallFire = function(){
121         var random = Math.round(Math.random()*10+10);
122         for(var i=0;i<random;i++){
123             let div = document.createElement("div");
124             div.className = "small-fire";
125             div.style.background = this.randomColor();
126             div.id = i;
127             div.style.left = this.target.left + "px";
128             div.style.top = this.target.top + "px";
129             this.parent.appendChild(div);
130             var target = {
131                 left:Math.round(Math.random()*900),
132                 top:Math.round(Math.random()*500)
133             }
134             move(div,target,function(){
135                 div.remove();
136             });
137         }
138     }
139     Fire.prototype.smallFire = function(){
140         var r = Math.round(Math.random()*100+100);
141         for(var i=0;i<12;i++){
142             let div = document.createElement("div");
143             div.className = "small-fire";
144             div.style.background = this.randomColor();
145             div.id = i;
146             div.style.left = this.target.left + "px";
147             div.style.top = this.target.top + "px";
148             this.parent.appendChild(div);
149             var target = {
150                 left:Math.round(Math.sin(Math.PI/180*30*i)*r) + this.target.left,
151                 top:Math.round(Math.cos(Math.PI/180*30*i)*r) + this.target.top
152             }
153             move(div,target,function(){
154                 div.remove();
155             });
156         }
157     }
158 </script>
159 </html>

辅助调用代码：move（）烟花的上升绽放

 1 function move(ele,json,callback){
 2     clearInterval(ele.t);
 3     ele.t = setInterval(() => {
 4         var onoff = true;
 5         for(var i in json){
 6             var iNow = parseInt(getStyle(ele,i));
 7             var speed = (json[i] - iNow)/6;
 8             speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
 9             if(iNow != json[i]){
10                 onoff = false;
11             }
12             ele.style[i] = iNow + speed + "px";
13         }
14         if(onoff){
15             clearInterval(ele.t);
16             callback && callback();
17         }
18     }, 30);
19 }
20 function getStyle(ele,attr){
21     if(ele.currentStyle){
22         return ele.currentStyle[attr];
23     }else{
24         return getComputedStyle(ele,false)[attr];
25     }
26 }

转载于:https://www.cnblogs.com/desLZW/p/11496347.html

V472482414

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象烟花小案例

JS基于面向对象实现的放烟花效果效果显示（上升图片）：效果显示（绽放图片）：效果显示（视频）：OOA 1.选中元素,点击事件,记录鼠标位置 2.创建主体烟花 3.初始化主体烟花 4.主体烟花运动 OOD 选中元素,点击事件,记录鼠标位置//主体部分 1 <!DOCTYPE html> 2 <html la...
复制链接

扫一扫