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.减少内存负担,移除看不见的盒子和关闭看不见的盒子对应的定时播放器,减少内存的消耗。 ![]() |
jquery实战6:高级特效烟花效果
最新推荐文章于 2024-07-03 17:41:41 发布