jQuery 烟花效果(运动相关)

开发 前端
0-16777215。有了这个范围就可以利用随机数,生成在这个范围内的色值了。当然最后还是要转成十六进制,并且不要忘记在色值前面加"#"号。

效果图

  1. $(function(){  
  2.     $(document).click(function(event){  
  3.         /*1.创建DIV并插入到body当中  
  4.         *2.设置其初始位置:TOP为屏幕的高度,left为鼠标点击时,鼠标的pageX值;  
  5.         */ 
  6.         //创建DIV  
  7.         var $div = $("<div/>");  
  8.         var eLeft = event.pageX;  
  9.         var etop = event.pageY;  
  10.         var cHeight = document.documentElement.clientHeight;  
  11.         //设定颜色、大小,和其初始化的位置  
  12.         $div.css({"width":4,"height":15,"background-color":"red","top":cHeight,"left":eLeft});  
  13.         //插入到页面的body当中去;  
  14.         $("body").append($div);  
  15.         //不要出现滚动条  
  16.         $("body").css("overflow","hidden");  
  17.         //让DIV向上移动,并且移动到鼠标位置后,删除这个DIV元素,之后执行烟花效果;  
  18.         $div.animate({"top":etop},700,function(){  
  19.             //移除DIV  
  20.             $(this).remove();  
  21.             /*烟花效果  
  22.             *1.烟花是很多个DIV构成  
  23.             *2.每个烟花的颜色不一样  
  24.             *3.烟花的位置也不一样  
  25.             *4.烟花散开方向不一样  
  26.             *5.烟花有下坠感觉  
  27.             */ 
  28.             //用循环造建很多个DIV,来表示烟花  
  29.             for(i=0;i<20;i++){  
  30.                 $("body").append($("<div class='yh'></div>"));  
  31.             }  
  32.             /*烟花的颜色是随机的,而且是用16进制表示色值,所以用随机数结合16进制;  
  33.             *16进制的最大值ffffff,转换成十进制16777215;  
  34.             *Math.random()*16777215公式可以得到0-16777215之间的数,因为是小数,所以要用到取整;  
  35.             *Math.ceil(Math.random()*16777215)生成一个在颜色值范围内的,随机的十进制值;  
  36.             *Math.random()*9+1公式可以得到1-10之间的数,以此类推  
  37.             *.toString(16)方法,是把得到的十进制,转换成16进制,也就是随机的颜色值了;  
  38.             */ 
  39.               
  40.             var sjColor = "" 
  41.             function changColor(){  
  42.                 sjColor = Math.ceil(Math.random()*16777215).toString(16)//;  
  43.                 //当这个产生的随机的颜色值,不足6位数的进候,需要补齐,又不改变其值,所以要在这个数的前面加零;  
  44.                 while(sjColor.length<6){  
  45.                     sjColor = "0"+sjColor;  
  46.                 }  
  47.             }  
  48.               
  49.  
  50.             //设置烟花DIV的颜色和位置、散开,坠落  
  51.             $(".yh").css({"width":3,"height":3,"top":etop,"left":eLeft});  
  52.             /*烟花散开要设左和上  
  53.             *Math.random()*20-20这里要减20,是因为烟花是从中心点的左右散开的,  
  54.             *最小随机数时0-10 = -10,最大随机数时20-10=10;所以就是正负10之间  
  55.             */ 
  56.             $(".yh").each(function(index, element) {  
  57.                 var $this = $(this);  
  58.                 changColor()  
  59.                 var yhX = Math.random()*400-200;  
  60.                 var yhY = Math.random()*600-300;  
  61.                 $this.  
  62.                 css({"background-color":"#"+sjColor,"width":3,"height":3}).  
  63.                 animate({"top":etop-yhY,"left":eLeft-yhX},500);//散开  
  64.                 for(i=0;i<30;i++){  
  65.                     //判断鼠标点击时的右边烟花还是左边烟花  
  66.                     if(yhX<0){  
  67.                         downPw($this,"+");//右下坠  
  68.                     }else{  
  69.                         downPw($this,"-");//左下坠  
  70.                     }  
  71.                 }  
  72.                   
  73.                 //下坠效果,即同时改变烟花元素的X和Y,会有抛物线感觉,然后完成动画后,删除这个烟花元素  
  74.                 function downPw(odiv,f){  
  75.                     odiv.animate({"top":"+=30","left":f+"=4"},50,function(){  
  76.                                 setTimeout(function(){odiv.remove()},2000);  
  77.                     })  
  78.                 }  
  79.             });  
  80.         });          
  81.     })  
  82. }) 

先上代码和效果图,具体的功能详解将在第二页中讲到。

#p#

一、功能

点击页面出现上图的效果,并下坠。

二、功能分析

1.点击时创建DIV并插入到body当中

2.烟花是很多个DIV构成,所以同时也要创建这些DIV

3.每个烟花的颜色不一样,所以需要随机函数处理颜色值

4.烟花的位置也不一样,所以也需要随机函数处理位置

5.烟花散开方向不一样

6.烟花要下坠感觉

三、总结:

3.1.随机数 Math.random()零到一之间的数;

3.11Math.random()乘以任意一个数,结果就是0-这个乘数之间的值,

Math.random()*9 结果就是0-9之间的数

3.12如果要让起始值为别一个指定的数,不为零,就加上这一个数;

Math.random()*8+2 结果就是2-10之间的数

3.13如果要想正负之间的数,就减去乘数的一半

Math.random()*8-4,其结果就是+4和-4之间的数

3.2运动核心

3.21就是让元素在当前页面中的X坐标,或Y坐标 发生改变(加、减、乘、除等,只要能让这个值改变的运算,都行)

3.22怎么改变才能看起来是运动的呢?

每次改变时,都是参考元素当前的X或Y坐标。(因为每一次的改变,这个元素的坐标就会变化)所以始终都要获取到当前这个元素改变之后的X或Y坐标值。

3.3随机颜色值

颜色值,是十六进制数。而这个值也是有范围的,所以我们要先取得其范围。

000000-FFFFFF。然后要转换成十进制的范围

0-16777215。有了这个范围就可以利用随机数,生成在这个范围内的色值了。当然最后还是要转成十六进制,并且不要忘记在色值前面加"#"号

3.4下坠感

其实就是让元素有,一个抛物线的变化,即让元素的X和Y的值,同时间变化。

(在使用setTimeout的时候,里面的this,不要指向错了!~~)

DEMO下载

 

责任编辑:张伟 来源: 船长op的博客
相关推荐

2019-12-26 09:46:26

工具代码开发

2012-04-26 10:56:05

jQuery效果

2010-09-07 09:30:25

DIV弹出jQuery

2021-10-26 15:22:52

鸿蒙HarmonyOS应用

2012-05-30 10:43:47

jQuery

2010-03-17 16:49:40

Java绿色线程

2009-09-23 17:19:19

jQuery页面渐显效

2012-06-05 09:38:39

PHP

2011-03-30 14:33:57

jQueryJavaScript

2012-08-22 10:28:03

jQuery

2012-05-09 13:45:04

jQuery

2012-10-08 10:27:56

jQueryJSJavaScript

2010-01-05 13:54:32

Jquery Json

2009-07-17 17:33:22

jQuery

2011-04-15 09:29:20

jQueryFlash

2012-04-10 10:41:59

jQueryASP.NET

2012-04-09 10:34:21

jQuery

2011-03-02 13:15:26

HTML 5jQuery

2014-02-13 14:14:24

工具jQuery

2012-06-19 14:42:02

jQuery
点赞
收藏

51CTO技术栈公众号