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(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片

2.循环创建30个小盒子:for循环,remove(); 移除对象节点。
jquery实战6(高级特效烟花效果)
文章图片

3.给30个盒子定义随机颜色:Math.random()获取0到1的随机数。Math.ceil()取整,toString(16)转换为16进制数,颜色值得表示
.speedX .speedY速度的定义。
jquery实战6(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片


jquery实战6(高级特效烟花效果)
文章图片

4.定时播放小盒子运动,setInterval(function(){},1000)定时器;position().top,position().left对象距离浏览器上或顶部距离的获取。
jquery实战6(高级特效烟花效果)
文章图片

5.减少内存负担,移除看不见的盒子和关闭看不见的盒子对应的定时播放器,减少内存的消耗。
jquery实战6(高级特效烟花效果)
文章图片


    推荐阅读