JavaScript+CSS相册特效实例代码

狼蚁网站SEO优化团队带来了一款精彩的JavaScript与CSS相册特效实例。今天，我们将为大家深入并分享这个实例，希望大家能够从中受益。

设计思路：

我们观察到一张图片的变化，并设计了以下特效：

1. 图片缩放：随机进行，不是运动性质的。分为两种情况，一是从大到小，二是在缩小完成后立即进行从小到大的缩放，同时透明度从1降至0。

2. 图片旋转：同样是随机进行，但在所有运动结束后开始。

由于每张图片的变换是随机开始的，所以起始时间各不相同。为此，我们设置了setTimeout来产生随机延迟。由于setTimeout会无视for循环的迭代变量i，所以我们使用了自执行函数来保存i的每一次值。

在转换期间，我们设定了按钮的div为不可点击状态，通过标记和判断来实现。由于运动包括缩放和旋转两个过程，我们需要确保在缩放全部结束后再开始旋转，这也要通过代码逻辑处理好。

笔记要点：

1. scale是缩放的意思。

2. transition代表过渡，可以延迟。

3. 子函数可以修改父亲的值，这就是闭包的应用。

4. 自执行函数主要用于保存循环变量i的每一次值。

5. Math.random()产生的值作为setTimeout的一个参数，用来控制延迟的时间。这个时间也会受到电脑性能的影响。

6. transitionend只要过渡结束就会执行，它是根据样式来计算的。缩放和透明度的变化都会触发transitionend。

7. HTML DOM的scale()方法用于添加缩放变换，参数sx和sy分别代表水平和垂直的缩放因子。

接下来，让我们直接实现这个特效，在加载页面时即可看到效果。

还有一些相关的知识点：

1. CSS3的opacity属性，用来指定元素的透明度，值从0（完全透明）到1（完全不透明）。

2. div是块级标签，其高度会被内容撑开。img标签默认向左漂浮，可以通过margin属性进行布局调整。

3. btn的高度由内容（font）决定。