JavaScript+CSS相册特效实例代码

嗯 就是这样一个例子，视频学到的一个特效，实际用处并不大，但是可以帮助理解JS语言和熟悉CSS3样式。

设计：

观察一张图片的变化，发现：

1、图片缩放（随机，并且不是同时运动）

      1、从大到小

       2、从小到大，透明度从1到0（在第一步运动完成后立马开始）

2、图片旋转（随机，并且不是同时运动的。需要在全部运动走完以后开始）

3. 因为每张图片是随机开始变换的，所以起始时间是不同的，这里可设置一个延迟器setTimeout，时间用random随机生成即可。

4. 中间需要用到自执行函数，因为setTimeout无视for循环的i，所以每次延时器运行的时候i可能都出错，用自执行函数保存i的每一次值。

5. 转换期间按钮的div是不能点击的，需要标记和判断。

6.运动共有两个，缩放和旋转，注意缩放全部结束才能开始旋转，这里也要处理好。

笔记：

然后就直接实现了，在加载页面的时候就运行这个特效。

补上中间查到的一些资料：

1.CSS3 opacity 属性：

2.HTML DOM scale() 方法：

参数

scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。

这里我直接一个参数就是同时缩小高度和宽度

3.

div是块标签，现在这种情况此div的标签会被里面图片高度自己撑起来，img标签都是默认向左漂浮的，刚好每行10个每个80px
margin: 0 auto是margin: 0 auto 0 auto的简写，也就是左右自动居中，至于为什么没有紧挨着上面的div，这个应该是上面那个margin: 80px auto，已经设置了跟下面的div外边距80px距离

btn的高度没有设置，靠font撑的

剩下就是代码了，注释很详细，回调函数很多。。：

    
 
点击查看效果

以上这篇JavaScript+CSS相册特效实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持html中文网。