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

2024-10-01 13:07:29

本文实例为大家分享了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焦点图特效汇总

jQuery级联菜单特效汇总

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

JS实现网页烟花动画效果

原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! 效果图: CSS代码: *{ padding: 0px; margin: 0px; background: #000; } .firworks{ width: 6px; height: 6px; position: absolute; } js代码: <script type="text/javascript"> //封装一个颜色随机的效果 function randomColor(){
JS实现烟花爆炸效果

本文实例为大家分享了JS实现烟花爆炸的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%;
非常漂亮的js烟花效果

本文实例为大家分享了js实现漂亮烟花效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>烟花</title> <style type="text/css"> div>div{ width:10px; height:10px; border-radius: 50%; po
JS实现放烟花效果

本文实例为大家分享了JS实现放烟花效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放烟花--欣欣博客</title> <style> html,body{overflow:hidden;} body,div,p{margin:0;padding:0;} body{background:#00
基于jQuery的烟花效果（运动相关）点击屏幕出烟花

效果图核心代码: 复制代码代码如下: $(function(){ $(document).click(function(event){ /*1.创建DIV并插入到body当中 *2.设置其初始位置:TOP为屏幕的高度,left为鼠标点击时,鼠标的pageX值: */ //创建DIV var $div = $("<div/>"); var eLeft = event.pageX; var etop = event.pageY; var cHeight = document
js实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加css属性,烟花节点从下至上运动. 3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片. 4.为不同的烟花碎片随机生成不同的颜色.运动速度.运动方向. 5.烟花碎片超出屏幕显示部分时移除. 3.代码部分 <!DOCTYPE html> <html lang="en"&g
js模拟实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下如下图首先描绘圆周运动 // d1 /*css*/ div{ height: 4px; width: 4px; background: red; position: absolute; } //js var div = document.getElementById('div'); // 画运动点 document.getElementsByTagName('body')[0].appendChild(tdiv); //
javascript实现超好看的3D烟花特效

本文实例为大家分享了超好看3D烟花的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>3D烟花</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #c
原生JS实现烟花效果

原生JS实现烟花效果,点击页面生成烟花,向四周扩散,然后再坠落下去.(这里的烟花我是用的特殊字符爱心形状) 基础css代码 /* 设置基础的css样式 */ body{background: #000;overflow: hidden;} .fire{position: absolute;width: 4px;height: 30px;} js代码: 1.给页面添加点击事件,生成主体烟花 //给页面设置点击事件 document.onclick = function(eve){ var e =
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】

本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果.分享给大家供大家参考,具体如下: 运行效果: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websocket

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

相关推荐

随机推荐