0 Comments

jQuery 烟花效果(运动相关)(2)

发布于:2013-07-10  |   作者:广州网站建设  |   已聚集:人围观

一、功能

点击页面出现上图的效果,并下坠。
广州网站建设,网站建设,广州网页设计,广州网站设计

二、功能分析

1.点击时创建DIV并插入到body当中

2.烟花是很多个DIV构成,所以同时也要创建这些DIV

3.每个烟花的颜色不一样,所以需要随机函数处理颜色值

4.烟花的位置也不一样,所以也需要随机函数处理位置

5.烟花散开方向不一样

6.烟花要下坠感觉

三、总结:

3.1.随机数 Math.random()零到一之间的数;

3.11Math.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运动核心

3.21就是让元素在当前页面中的X坐标,或Y坐标 发生改变(加、减、乘、除等,只要能让这个值改变的运算,都行)

3.22怎么改变才能看起来是运动的呢?

每次改变时,都是参考元素当前的X或Y坐标。(因为每一次的改变,这个元素的坐标就会变化)所以始终都要获取到当前这个元素改变之后的X或Y坐标值。

3.3随机颜色值

颜色值,是十六进制数。而这个值也是有范围的,所以我们要先取得其范围。

000000-FFFFFF。然后要转换成十进制的范围

0-16777215。有了这个范围就可以利用随机数,生成在这个范围内的色值了。当然最后还是要转成十六进制,并且不要忘记在色值前面加"#"号

3.4下坠感

其实就是让元素有,一个抛物线的变化,即让元素的X和Y的值,同时间变化。

(在使用setTimeout的时候,里面的this,不要指向错了!~~)

飞机