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

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

 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.减少内存负担,移除看不见的盒子和关闭看不见的盒子对应的定时播放器,减少内存的消耗。

jquery实战6:高级特效烟花效果_第1张图片

jquery实战6:高级特效烟花效果_第2张图片

jquery实战6:高级特效烟花效果_第3张图片

jquery实战6:高级特效烟花效果_第4张图片
2.循环创建30个小盒子:for循环,remove();移除对象节点。
jquery实战6:高级特效烟花效果_第5张图片
3.给30个盒子定义随机颜色:Math.random()获取0到1的随机数。Math.ceil()取整,toString(16)转换为16进制数,颜色值得表示
.speedX .speedY速度的定义。
jquery实战6:高级特效烟花效果_第6张图片

jquery实战6:高级特效烟花效果_第7张图片

jquery实战6:高级特效烟花效果_第8张图片

jquery实战6:高级特效烟花效果_第9张图片

jquery实战6:高级特效烟花效果_第10张图片

图片
4.定时播放小盒子运动,setInterval(function(){},1000)定时器;position().top,position().left对象距离浏览器上或顶部距离的获取。
jquery实战6:高级特效烟花效果_第11张图片
5.减少内存负担,移除看不见的盒子和关闭看不见的盒子对应的定时播放器,减少内存的消耗。
jquery实战6:高级特效烟花效果_第12张图片

你可能感兴趣的:(web前端)