Function package movement, upward movement is achieved fireworks
note:
In the first movement function:
1, each time the implementation of new functions, be sure to remove the last of the timer, which will cause cumulative timer
2, pay attention to the browser compatibility problems
3, to judge the positive or negative step value
. 1 var Timer = null ; // Timer 2 function the startMove (obj, objArr, the callback) { . 3 the clearInterval (obj.timer); // time Clear Timer . 4 var onoff = to false ; // define the switch, the initial value It is to false . 5 obj.timer = the setInterval ( function () { . 6 // the console.log (attr); // attribute . 7 // the console.log (objArr [attr]); // attribute value 8 // traverse the object . 9 for ( var attr in objArr) { 10 //Acquiring real-time position . 11 var tmpPos = the parseInt (getPos (obj, attr)); 12 is // define a step value 13 is var Speed = (objArr [attr] - tmpPos) / 10 ; 14 // determination step value 15 Speed = Speed ?> 0 Math.ceil (Speed): Math.floor (Speed); 16 . 17 // assigned to the object 18 is obj.style [attr] = tmpPos + + Speed 'PX' ; . 19 20 is } 21 is // determination element movement threshold 22 is IF ((Speed + tmpPos) == objArr [attr]) = onoff to true ; 23 is IF (onoff) { 24 the clearInterval (obj.timer); 25 IF (the callback) { 26 is the callback (); 27 } 28 } 29 }, 30 ) 30 31 is } 32 // wrapper function acquires real-time position 33 is function getPos (obj, attr) { 34 is IF (obj.currentStyle) { 35 return the currentStyle [attr]; // IEs 36 } the else { 37 [ return the getComputedStyle (obj) [attr]; // non IEs 38 is } 39 }
Object-Oriented
Second:
In object-oriented in
1, in the binding event, remember to instantiate an object
2, when calling motion functions, parameters to recall one correspondence, and cleared itself after achieving
3, in a small fireworks, when the motion function call later, to use block-level scope, the saved sFire
Once finished, the next execution time
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 #cont { 15 width: 1200px; 16 height: 600px; . 17 background: Black; 18 is margin: 50px Auto; . 19 position: relative; 20 is Cursor: pointer; 21 is background: Black; 22 is / * to set the relative positioning, or the big fireworks not correspond to the mouse position * / 23 } 24 25 . BIG- Fire { 26 is background: Red; 27 position: Absolute; 28 / * set bottom, top obtaining a maximum value by subtracting the position of the mouse click * / 29 bottom: 0px; 30 width: 6px; 31 is height: 6px; 32 } 33 34 .small-fire { 35 width: 10px; 36 height: 10px; 37 position: absolute; 38 border-radius: 50%; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="cont"></div> 44 <script src="./move.js"></script> 45 <script> 46 //1 获取节点 47 var contObj = document.getElementById('cont'); 492 bind mouse events to obtain real-time location//48 = contObj.onclick function (Eve) { 50 var E = || Eve the window.event; 51 is var mousePos = { 52 is X: e.offsetX, 53 is Y: e.offsetY 54 is } 55 // the console.log (e.offsetX ); 56 is // the console.log (e.offsetY); 57 is new new Fire (contObj, mousePos); 58 } 59 60 // . 3 constructor fireworks package 61 is function Fire (contObj, mousePos) { 62 is // !!! 63 is this.contObj = contObj; 64 this.mousePos = mousePos; 65 //创建大烟花，设置class，left，bg 66 var bigFire = document.createElement('div'); 67 bigFire.className = 'big-fire'; 68 bigFire.style.left = mousePos.x + 'px'; 69 bigFire.style.backgroundColor = this.ranColor(); 70 contObj.appendChild(bigFire); 71 var that = this; 72 startMove(bigFire,{top:mousePos.y},function(){ 73 bigFire.remove(); 74 that.smallFire(); 75 }) 76 } 77 /*封装小烟花*/ 78 Fire.prototype.smallFire = function(){ 79 var fireNum = 20; 80 for(var i = 0;i<fireNum;i++){ 81 var sFire = document.createElement('div'); 82 sFire.className = 'small-fire'; 83 contObj.appendChild(sFire); 84 sFire.style.backgroundColor = the this .ranColor (); 85 // small fireworks initial position 86 sFire.style.left = the this .mousePos.x + 'PX' ; 87 sFire.style.top = the this .mousePos.y + 'PX' ; 88 // small fireworks end position 89 var sLeft = the this .ranNum (0, contObj.offsetWidth - sFire.offsetWidth); 90 var STOP = the this .ranNum (0, contObj.offsetHeight - sFire.offsetHeight); 91 is // 6 motion calling function 92 //Because for the circulation rate, than fireworks moves to the end of the fast 93 // call the function is to use motion sFire, when the fireworks to the end position, has been to other new fireworks cover 94 @ using block-level scopes, sFire saved up, once finished, the execution time 95 ( function (sFire) { 96 the startMove (sFire, {left: sLeft, Top: STOP}, function () { 97 sFire.remove (); 98 }); 99 }) (sFire) // ! ! ! Note that invokes a fireworks 100 } 101 } 102 // random color 103 Fire.prototype.ranColor = function () { 104 var r = this.ranNum(0,255); 105 var g = this.ranNum(0,255); 106 var b = this.ranNum(0,255); 107 return `rgb(${r},${g},${b})`; 108 } 109 //封装随机数 110 Fire.prototype.ranNum=function(min,max){ 111 return Math.round(Math.random()*(max-min)+min); 112 } 113 </script> 114 </body> 115 </html>