jquery实战6：高级特效烟花效果

jquery实战6：高级特效烟花效果 <script type="text/javascript" >  $(document).click(function(e){  //alert("1");  var div1=$("<div></div>");//声明定义要创建的红色div1的对象  div1.css({width:"4px",height:"15px",background:"white"});//定义新建的div1的样式  $("body").append(div1);//正式将div1添加到body中  var t=$(document).height();//获取浏览器窗口的高度。用于div1的定位  var j=$(document).width();  var l=e.clientX;//获取鼠标点击时鼠标的x值坐标，用于定位div1  var m=e.clientY;  //alert(t+""+l);  div1.css({top:t,left:j/2});//div1的绝对定位。  div1.animate({top:m,left:l},1000,function(){   $(this).remove();   var i=0;   var sp_div=[];   for(i=0;i<50;i++){    sp_div[i]=$("<div></div>");    sp_div[i].css({width:"4px",height:"4px",background:"#"+sj_color(),borderRadius:"2px",top:m,left:l});    $("body").append(sp_div[i]);    sp_div[i].speedX=Math.random()*30-15;//X轴速度    sp_div[i].speedY=Math.random()*30-15;//Y轴速度   }   setInterval(function(){//定时器对下面单独动画进行整体的处理。    var h=0;    for(h=0;h<50;h++){//此循环是取得数组对象，单独对每个对象做动画处理。     //sp_div[j].left=+spdiv[i].speedX;     if(!sp_div[h]) continue;     sp_div[h].css({background:"#"+sj_color(),left:sp_div[h].position().left+sp_div[h].speedX,top:sp_div[h].position().top+sp_div[h].speedY});     sp_div[h].speedY=sp_div[h].speedY+0.6;//保证Y轴的速度大于X轴的速度 ，这样才能模拟重力环境。     if(sp_div[h].position().top>t || sp_div[h].position().left<0 || sp_div[h].position().left>j){      sp_div[h].remove();      sp_div[h]=null;          };    }      },30);  });//div1执行动画函数，设置其高度。    });  //创建随机的颜色  function sj_color(){  //alert(Math.ceil(Math.random()*16777215).toString(16));//小数点取整,并转换成16进制数  var _color=Math.ceil(Math.random()*16777215).toString(16);//16进制颜色随机颜色值的获取，在函数被循环调用时生成不同颜色值。  while(_color.length<6){//判断颜色值位数小于6位，自动加0.颜色值的表示必须为6位数   _color="0"+_color;  };  return _color;  }; // alert(sj_color());  </script>  1.动态创建盒子模型：click()点击事件;append()添加节点;animate({},500,function(){});动画创建及其三个参数的意义。.css()对象css样式改变;.clientx.clientY鼠标点击时出发事件获取位置.height()；浏览器窗口的获取。 2.循环创建30个小盒子：for循环，remove();移除对象节点。 3.给30个盒子定义随机颜色：Math.random（）获取0到1的随机数。Math.ceil（）取整，toString(16)转换为16进制数，颜色值得表示,.speedX .speedY速度的定义。 4.定时播放小盒子运动，setInterval(function(){},1000)定时器；position().top,position().left对象距离浏览器上或顶部距离的获取。 5.减少内存负担，移除看不见的盒子和关闭看不见的盒子对应的定时播放器，减少内存的消耗。 2.循环创建30个小盒子：for循环，remove();移除对象节点。 3.给30个盒子定义随机颜色：Math.random（）获取0到1的随机数。Math.ceil（）取整，toString(16)转换为16进制数，颜色值得表示 .speedX .speedY速度的定义。 4.定时播放小盒子运动，setInterval(function(){},1000)定时器；position().top,position().left对象距离浏览器上或顶部距离的获取。 5.减少内存负担，移除看不见的盒子和关闭看不见的盒子对应的定时播放器，减少内存的消耗。