一個box中，點擊其中的任意位置，會有煙花從正下方升起到點擊處，並燃放出一圈圓形的煙花。代碼如下：
首先是布局以及樣式：
<style> .box{ width: 1100px; height: 500px; background: #000; border: 1px solid red; margin: 0 auto; position: relative; overflow: hidden; } .fire { width: 10px; height: 10px; position: absolute; bottom: 0; } .small{ width: 10px; height: 10px; position: absolute; border-radius: 50%; } </style>
<body> <div class="box"></div> </body>
只給一個盒子的布局，燃放的煙花以及綻放的小煙花都是中js代碼中創建。
js代碼：
//創造主體函數 function Fire(options){ this.x = options.x; this.y = options.y; this.box = options.parent this.init(); } //初始狀態，創建燃放的煙花並讓它出現在鼠標點擊位置的正下方 Fire.prototype.init = function(){ this.div = document.createElement("div"); this.div.className = "fire"; this.div.style.left = this.x + "px"; // this.div.style.top = this.y; this.div.style.background = randomColor(); this.box.appendChild(this.div); //煙花上升 this.fly(); } //讓煙花上升到鼠標點擊的高度，然后讓其消失並創建小煙花 Fire.prototype.fly =function(){ move(this.div,{ top:this.y },()=>{ this.div.remove(); this.creatSmall(); }) } //創建小煙花，設置其寬高位置為鼠標點擊位置 Fire.prototype.creatSmall = function(){ //圓周煙花的半徑 var r = random(100,200); for(var i=0;i<12;i++){ let small = document.createElement("div"); small.className = "small"; small.style.left = this.x + "px"; small.style.top = this.y + "px"; small.style.background = randomColor(); this.box.appendChild(small); //計算小煙花運動至指定圓周的位置 var l = Math.round(Math.sin(Math.PI/180*30*i)*r) + this.x; var t = Math.round(Math.cos(Math.PI/180*30*i)*r) + this.y; //讓小煙花到達目標處后消失不見 move(small,{ left:l, top:t },function(){ small.remove(); }); } } var obox = document.querySelector(".box"); obox.onclick = function(eve){ var e = eve || window.event; new Fire({ x:e.offsetX, y:e.offsetY, parent:this }); }
順便把我封裝的一些實用的函數分享出來：
//范圍隨機數 function random(max,min){ return Math.round(Math.random()*(max - min)+min); } //隨機顏色 function randomColor(){ return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")"; } //move函數 function move(ele,json,callback){ clearInterval(ele.t); ele.t = setInterval(() => { var onoff = true; for(var i in json){ var iNow = parseInt(getStyle(ele,i)) var speed = (json[i] - iNow)/6; speed = speed < 0?Math.floor(speed):Math.ceil(speed); if(iNow != json[i]){ onoff = false; } ele.style[i] = iNow + speed + "px"; } if(onoff){ clearInterval(ele.t); callback && callback(); } }, 30); } //獲取非行內樣式 function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
若有不足，還望指出。可以互相交流學習一下