var container = $('#container')[0]; var arr = []; // 存放鼠标点击位置 var iCount = -1; $(container).on('mousedown', function(e) { iCount++; e = e || window.event; boom.init([e.clientX, e.clientY], 20,container, 1) arr[iCount] = []; // 每点击一次，增加一个二位数组 $(container).on('mousemove', function(e) { e = e || window.event; boom.init([e.clientX, e.clientY], 20, container, 1) arr[iCount].push([e.clientX, e.clientY]) // 鼠标每移动一次，添加鼠标位置 }) $(container).on('mouseup', function() { $(container).off('mousemove') }) }); // 重绘 $('#repaint').click(function() { // console.log(arr) if( !arr.length ){ return; } var tempArr= []; // 将所有点取出来，转换为二维数组 for(var i = 0; i < arr.length; i++){ for(var j = 0; j< arr[i].length; j++){ tempArr.push(arr[i][j]) } } var count = 0; var timmer = setInterval(function(){ if( ++ count >= tempArr.length){ clearInterval(timmer) } boom.init(tempArr[count],20,container,1) },16) }); $('#zero').click(function(){ iCount=-1; arr=[] });
烟花节点可以用背景图代替，比如用小爱心或者五角星啥的，只是大小得适当调整。
更多JavaScript精彩特效分享给大家：