一个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]; } }
若有不足，还望指出。可以互相交流学习一下