jquery实现烟花效果(面向对象)
更新时间：2020年03月10日 15:53:07 作者：-恩恩-
这篇文章主要为大家详细介绍了jquery面向对象实现烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现烟花效果的具体代码，供大家参考，具体内容如下
<!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="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 class='flower'></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精彩特效分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
把其中的参数默认值作为$.fn.color对象的属性单独进行设计，然后借助jquery.extend方法，覆盖原来的参数选项即可2012-08-08
jQuery Validation PlugIn的使用方法详解
这篇文章主要介绍了jQuery Validation PlugIn的使用方法，需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇jquery 遍历数组 each 方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jquery与js实现全选功能的区别,需要的朋友可以参考下2017-06-06
语法着色大家对它都不陌生吧，下面为大家介绍的是jquery-syntax动态语法着色的具体实现,需要的朋友可以参考下2014-05-05
在Web项目中引入Jquery插件报错的完美解决方案(图解)
这篇文章主要介绍了在Web项目中引入Jquery插件报错的完美解决方案的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
第一次做的插件，我这个插件好像使用有些另类，是调用数据展示容器的元素$(#DataContent).AmSetPager({...});在参数中配置分页容器元素ID。写完插件后看别的插件都是调用分页元素ID2013-04-04
下拉和收缩类似的效果应用非常的频繁，这篇文章主要介绍了jquery实现的下拉和收缩效果,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了jQuery获取动态添加元素的方法详解,jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库,它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单,需要的朋友可以参考下2023-08-08
本文为大家介绍下jQuery的输入控件及回车事件的应用，具体示例代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
最新评论