基于jQuery(运动相关)的烟花效果点击屏幕显示烟花

效果图

核心代码：复制代码如下： $ (function () {$ (document))。click(function(event)){/* 1。创建DIV并将其插入正文*2。设置其初始位置：TOP为屏幕高度，left为鼠标点击时鼠标的pageX值；*///创建DIV var $ DIV=$(' DIV/')；var eLeft=event.pageXvar etop=event.pageYvar cHeight=document . document element . client height；//设置$ div.css的颜色、大小和初始化位置({'width' :4，' height' :15，' background-color' :' red '，' top' 3360c height，' left ' : eleft })；//插入页面正文；$(“body”)。追加($ div)；//不显示滚动条$(“正文”)。CSS('溢出'，'隐藏')；//让DIV上移移动到鼠标位置，删除这个DIV元素，然后进行烟花效果；$ div。animate ({'top' : etop}，700，function () {//remove DIV $(this)。移除()；/*烟花效果*1。烟花由许多DIVs * 2组成。每个烟花的颜色都不一样*3。烟花也在不同的位置*4。烟花向不同的方向散开。烟花有落花的感觉*///很多div是通过循环来构建的，代表烟花为(I=0；i20i ){ $('body ')。追加($(' div class=' yh '/div ')；}/*烟花的颜色是随机的，颜色值用十六进制表示，所以随机数和十六进制结合；*最大ffffff以十六进制表示，转换为十进制16777215；*Math.random()*16777215公式可以得到一个0到16777215之间的数字，因为是小数，所以需要四舍五入；* math . ceil(math . random()* 16777215)在颜色值范围内生成随机的十进制值；*Math.random()*9 1公式可以得到1到10之间的数字，以此类推*。toString(16)方法是将十进制转换为十六进制，这是一个随机的颜色值；*/var sjColor=' ' function changColor(){ sjColor=math . ceil(math . random()* 16777215)。toString(16)//；//当生成的随机颜色值小于6位数字时，需要在不改变其值的情况下完成，所以需要在这个数字前面加零；while(sjColor . length 6){ sjColor=' 0 ' sjColor；} }//设置fireworks DIV、散点和落点$('的颜色和位置。yh’)。CSS ({'width' :3，' height' :3，' top' :etop，' left ' : eleft })；/*烟花应该向左上方散开*Math.random()*20-20。这里要减少20，因为烟花是从中心点左右散开的，* 0-10=-10当最小随机数为时，20-10=10当最大随机数为时；所以是*/$('。yh’)。每个(函数(索引，元素){ var $ this=$(this)；changColor()var yhX=math . random()* 400-200；var yhY=math . random()* 600-300；这个。css({ '底色' :'#' sjColor，'宽度' :3，'高度' :3})。动画({'top':etop-yhY，' left':eLeft-yhX}，500)；//展开为(I=0；i30I ){ //判断鼠标点击if(yhX0){ DoWw($ this，’)时是右烟花还是左烟花；//向右倒} else { DoWw($ this，'-')；//左落} }//下落效果，即同时改变烟花元素的X和Y会给人一种抛物线的感觉。然后，完成动画后，删除这个fireworks元素函数downw(odiv，f) {odiv。动画({'top' :'=30 '，' left' :f'=4'}。}) } });});})})首先，点击页面显示上图的效果，放下。

2.功能分析1。点击时创建div，并将其插入正文2。烟花是由很多div组成的，所以这些div也要同时创建3。每个烟花的颜色不同，所以需要随机函数来处理颜色值4。烟花也在不同的位置，所以处理位置5也需要随机函数。烟花向不同的方向散开。烟花需要落下。3.总结：3.1。随机数Math.random()为零。3.11将ath.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 Motion核心3.21是改变当前页面中元素的x坐标或y坐标(加减乘除等)。).每次更改时，它都是参考元素的当前x或y坐标。(因为这个元素的坐标会随着每次变化而变化)，总是需要得到变化后当前元素的x或y坐标值。3.3随机颜色值颜色值是十六进制数。这个值有一个范围，所以我们需要先得到它的范围。000000-FFFFFF。那么应该转换成0-16777215的十进制范围。在此范围内，随机数可用于生成此范围内的颜色值。最后当然要转换成十六进制，别忘了在颜色值3.4前面加“#”其实就是让元素有一个抛物线变化，也就是让元素的x和y值同时变化。(使用setTimeout时，不要指向这个错误！~ ~)在线演示：http://demo.jb51.net/js/2012/myyanhua/包下载：myyanhua_jb51.rar