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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python如何输出整数
2020/06/07 Python
python 爬虫请求模块requests详解
2020/12/04 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
就业协议书范本
2014/04/11 职场文书
小学运动会班级口号
2014/06/09 职场文书
法院授权委托书范文
2014/08/02 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
幽默导游词开场白
2015/05/29 职场文书