本文实例为大家分享了jquery实现烟花效果的具体代码,供大家参考,具体内容如下
& lt; ! DOCTYPE>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>烟花效果(面向对象)& lt;/title>
& lt;风格类型=" text/css "比;
*{填充:0;保证金:0}
身体{溢出:隐藏;宽度:100%;高度:100%;背景:# 000;}
div{:绝对;背景:# 000;颜色:# fff}
& lt;/style>
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.8.3.min.js "祝辞& lt;/script> & lt;/script>
& lt;/head>
& lt; body>
& lt;脚本type=" text/javascript祝辞
var firWorks={
初始化:函数(){//初始化
var _that=;
$(文档).bind(“点击”,函数(e) {
_that。eventLeft=e.pageX;
_that。eventTop=e.pageY;
_that.createCylinder ();
});
},
createCylinder:函数(事件){//创建一个花筒
var _that=;
这一点。cHeight=document.documentElement.clientHeight;//浏览器高度
这一点。汽缸=$ (“& lt; div/祝辞”);
$(“身体”).append (this.cylinder);
this.cylinder.css({“宽度”:4日,“身高”:15日“背景颜色”:“红色”,“顶”:this.cHeight,“左”:this.eventLeft});
this.cylinder.animate(600年{:this.eventTop},函数(){
(美元).remove ();
_that.createFlower ();
})
},
createFlower:函数(){//创建很多很多的烟花哇! !/*烟花效果
* 1 .烟花是很多个DIV构成
* 2 .每个烟花的颜色不一样
* 3 .烟花的位置也不一样
* 4 .烟花散开方向不一样
* 5 .烟花有下坠感觉
*///通过循环可以创建你想要的烟花啦! ! !
var _that=;
(var=0;我& lt;30;我+ +){
(“身体”).append美元($ (“& lt; div类=ā? lt;/div> "));
};
$(“菌核病”). css({“宽度”:3,“高度”:3,“顶级”:this.eventTop,“左”:this.eventLeft});
$("菌核病”)。每个(函数(指数(元素){
var=$美元(这);
var yhX=math . random () * 400 - 200;
var yhY=math . random () * 600 - 300;
_that.changeColor ();
美元this.css({“背景颜色”:“#”+ _that.randomColor,“宽度”:3,“高度”:3}).animate({“顶级”:_that.eventTop-yhY,“左”:_that.eventLeft-yhX}, 500);//散开
我(var=0; i<30;我+ +){//判断鼠标点击时的右边烟花还是左边烟花
如果(yhX<0) {
_that.downPw ($ this, " + ");//右下坠
其他}{
_that.downPw(美元,“-”);//左下坠
}
}
});
},
changeColor:函数(){/*烟花的颜色是随机的,而且是用16进制表示色值,所以用随机数结合16进制;
* 16进制的最大值ffffff,转换成十进制16777215;
* math . random() * 16777215公式可以得到0 - 16777215之间的数,因为是小数,所以要用到取整;
* Math.ceil (math . random() * 16777215)生成一个在颜色值范围内的,随机的十进制值;
* math . random() * 9 + 1公式可以得到1 - 10之间的数,以此类推
* .toString(16)方法,是把得到的十进制,转换成16进制,也就是随机的颜色值了;
*/这一点。randomColor=" ";
这一点。randomColor=Math.ceil (math . random () * 16777215) .toString (16)//;//当这个产生的随机的颜色值,不足6位数的进候,需要补齐,又不改变其值,所以要在这个数的前面加零;
而(this.randomColor.length<6) {
这一点。randomColor=" 0 " + this.randomColor;
}
},
downPw:函数(避署、类型){//烟花下坠啦! ! ! !
ele.animate({“顶”:“30 +=?“左”:类型+=4”},50岁的函数(){
setTimeout(函数(){ele.remove ()}, 2000);
})
}
};
firWorks.init ();
& lt;/script>
& lt;/body>
& lt;/html>
更多的JavaScript精彩特效分享给大家:
jQuery幻灯片特效汇总
jQuery焦点图特效汇总
jQuery级联菜单特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
