<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>烟花效果(面向对象)</title> <style type="text/css"> *{padding: 0;margin: 0} body{overflow: hidden;width: 100%;height: 100%;background: #000; } div{position: absolute;background: #000;color: #fff} </style> <script src="https://www.jb51.net/jquery-1.8.3.min.js"></script></script> </head> <body> <script type="text/javascript"> var firWorks = { init : function(){ //初始化 var _that = this; $(document).bind("click",function(e){ _that.eventLeft = e.pageX; _that.eventTop = e.pageY; _that.createCylinder(); }); }, createCylinder : function(event){ //创建一个花筒 var _that = this; this.cHeight = document.documentElement.clientHeight;//浏览器高度 this.cylinder = $("<div/>"); $("body").append(this.cylinder); this.cylinder.css({"width":4,"height":15,"background-color":"red","top":this.cHeight,"left":this.eventLeft}); this.cylinder.animate({top:this.eventTop},600,function(){ $(this).remove(); _that.createFlower(); }) }, createFlower : function(){ //创建很多很多的烟花哇！！ /*烟花效果 *1.烟花是很多个DIV构成 *2.每个烟花的颜色不一样 *3.烟花的位置也不一样 *4.烟花散开方向不一样 *5.烟花有下坠感觉 */ //通过循环可以创建你想要的烟花啦！！！ var _that = this; for(var i = 0 ; i < 30; i++ ){ $("body").append($("<div></div>")); }; $(".flower").css({"width":3,"height":3,"top":this.eventTop,"left":this.eventLeft}); $(".flower").each(function(index, element) { var $this = $(this); var yhX = Math.random()*400-200; var yhY = Math.random()*600-300; _that.changeColor(); $this.css({"background-color":"#"+_that.randomColor,"width":3,"height":3}).animate({"top":_that.eventTop-yhY,"left":_that.eventLeft-yhX},500);//散开 for(var i=0;i<30;i++){ //判断鼠标点击时的右边烟花还是左边烟花 if(yhX<0){ _that.downPw($this,"+");//右下坠 }else{ _that.downPw($this,"-");//左下坠 } } }); }, changeColor : function(){ /*烟花的颜色是随机的，而且是用16进制表示色值，所以用随机数结合16进制; *16进制的最大值ffffff,转换成十进制16777215; *Math.random()*16777215公式可以得到0-16777215之间的数，因为是小数，所以要用到取整; *Math.ceil(Math.random()*16777215)生成一个在颜色值范围内的，随机的十进制值; *Math.random()*9+1公式可以得到1-10之间的数，以此类推 *.toString(16)方法，是把得到的十进制，转换成16进制，也就是随机的颜色值了; */ this.randomColor = ""; this.randomColor = Math.ceil(Math.random()*16777215).toString(16)//; //当这个产生的随机的颜色值，不足6位数的进候，需要补齐，又不改变其值，所以要在这个数的前面加零; while(this.randomColor.length<6){ this.randomColor = "0"+this.randomColor; } }, downPw : function(ele,type){ //烟花下坠啦 ！！！！ ele.animate({"top":"+=30","left":type+"=4"},50,function(){ setTimeout(function(){ele.remove()},2000); }) } }; firWorks.init(); </script> </body> </html>
更多JavaScript精彩特效分享给大家：