JavaScript+CSS如何实现相册特效

这篇文章给大家分享的是有关JavaScript+CSS如何实现相册特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。10多年网站建设经验创新互联是成都老牌网站营销服务商,为您提供网站设计、成都网站制作、网站设计、HTML5建站、网站制作、成都品牌网站建设、重庆小程序开发服务,给众多知名企业提供过好品质的建站服务。

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

设计：

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

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

      1、从大到小

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

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

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

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

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

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

笔记：

scale是缩放

transition 过渡，延迟

子函数修改父亲的值，就是闭包

自执行函数 这里主要用来保存i的每一次值

如果直接加定时器，就不管外面循环，1s后才执行，这时的i都不知道到哪里了，可能越界

Math.random()产生的值是setTimeout的一个参数，延迟的时间

setTimeout延迟时间也与电脑卡影响

transitionend只要过渡了就会执行，它是根据 样式来计算的

缩放和透明都会触发transitionend

call()改变this指向的对象

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

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

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撑的

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