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


Posted in jQuery onMarch 10, 2020

本文实例为大家分享了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精彩特效分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jquery实现垂直手风琴菜单
Mar 04 #jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
jquery实现直播视频弹幕效果
Feb 25 #jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
jquery向后台提交数组的代码分析
Feb 20 #jQuery
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
You might like
ThinkPHP令牌验证实例
2014/06/18 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
网页常用特效代码整理
2006/06/23 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python日期操作学习笔记
2008/10/07 Python
浅谈Python中的闭包
2015/07/08 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
python eventlet绿化和patch原理
2020/11/21 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
住房公积金接收函
2014/01/09 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
导游词之无锡梅园
2019/11/28 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL