jquery实现烟花效果(面向对象)

2023-07-29 12:22:03 64

本文实例为大家分享了jquery实现烟花效果的具体代码，供大家参考，具体内容如下





烟花效果(面向对象)

*{padding:0;margin:0}
body{overflow:hidden;width:100%;height:100%;background:#000;}
div{position:absolute;background:#000;color:#fff}








varfirWorks={
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=$("");
$("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(vari=0;i<30;i++){
$("body").append($(""));
};
$(".flower").css({"width":3,"height":3,"top":this.eventTop,"left":this.eventLeft});
$(".flower").each(function(index,element){
var$this=$(this);
varyhX=Math.random()*400-200;
varyhY=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(vari=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();

更多JavaScript精彩特效分享给大家：

jQuery幻灯片特效汇总

jQuery焦点图特效汇总

jQuery级联菜单特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

jquery实现烟花效果(面向对象)

热门推荐

随机推荐