下面小编就给大家带来一个JavaScript CSS相册特效示例代码。我觉得边肖挺好的。我现在就分享给你，给你一个参考。来和边肖一起看看吧。
嗯，就是这么个例子。从视频中学到的一个特效，实际用处不大，但是可以帮助你理解JS语言，熟悉CSS3风格。
设计：
观察一张图片的变化，发现：
1、图片缩放（随机，并且不是同时运动）
1、由大到小
2.从小到大，透明度从1到0(第一个动作完成后立即开始)
2、图片旋转（随机，并且不是同时运动的。需要在全部运动走完以后开始）
3. 因为每张图片是随机开始变换的，所以起始时间是不同的，这里可设置一个延迟器setTimeout，时间用random随机生成即可。
4. 中间需要用到自执行函数，因为setTimeout无视for循环的i，所以每次延时器运行的时候i可能都出错，用自执行函数保存i的每一次值。
5. 转换期间按钮的div是不能点击的，需要标记和判断。
6.运动共有两个，缩放和旋转，注意缩放全部结束才能开始旋转，这里也要处理好。
笔记：
规模就是规模。
过渡过渡，延迟
子函数修改父函数的值，这是一个闭包。
这里的自执行函数主要是用来保存I的每一个值。
如果直接加定时器，1s后执行，不考虑外循环。这个时候我不知道自己在哪里，可能出界了。
Math.random()生成的值是setTimeout(延迟时间)的参数。
SetTimeout延迟时间也会影响计算机卡。
只要有过渡就会执行Transitionend，而且是按照样式计算的。
缩放和透明都触发过渡结束。
Call()改变它所指向的对象。
然后直接实现，这个特效在页面加载的时候运行。
编造一些中间发现的信息：
1.CSS3不透明度属性：
价值
形容
价值
指定不透明度。从0.0(完全透明)到1.0(完全不透明)
继承
不透明度属性的值应该从父元素继承。
2.HTML domscale()方法：
参数
参数
形容
sx，sy
以及水平和垂直比例因子。
形容
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，这应该是边距：顶部80px auto，已经设置了与下面div外缘80px的距离。
btn的高度没有设置，但是字体支持。
剩下的就是代码，还有详细的注释和很多回调函数。
！文档类型html
超文本标记语言
头
meta charset='UTF-8 '
标题/标题
风格
/*图片容器的整体风格，左右视图中心的景深为800 px */
#imgWrap{
宽度：800px
高度：400px
边距：80px自动；
视角：800px
}
/*左对齐，高度和宽度*数量=整体div*/
#imgWrap img{
浮动：左；
宽度：80px
高度：80px
}
#btn{
宽度：100px
/*height: 40px此处未定义或与font大小相同*/
背景：rgb(0，100，0)；
填充：0 20px
/*字体大小和行高的可能值。*/
字体：16px/40px '微软雅黑'；
颜色：# fff
边距：0自动；
边框半径：5px
盒影：2px 2px 5px # 000
光标：指针；
}
/风格
脚本
/*
* 1、图像缩放(随机，且不同时移动)
* 1、由大到小
* 2.从小到大，透明度从1到0(第一个动作完成后立即开始)
*
* 2.图像旋转(随机，不同时移动。需要在所有运动后开始)
*/
window.onload=function(){
var BTN=document . getelementbyid(' BTN ')；
//选择所有元素
var imgs=document . query selector all(' img ')；
var endNum=0；//它表示完成的图片移动次数
var canClick=true//它代表用户是否可以再次点击。
btn.onclick=function(){
如果(！点击){
返回；//不要用下面的代码
}
canClick=false
for(var I=0；iimgs.lengthi ){
(职能(一){
setTimeout(function()).
/* img[I]。风格。转换=' 100毫秒'；
img[I]。风格。transform=' scale(0)':
img[I]。风格。不透明度=“0”；
img[I].addevent侦听器(' transitional end，function()).
控制台。日志(1)；
});*/
motion(img[I]，' 50ms '，function()).
这个。风格。transform=' scale(0)'；
}、函数()
运动(this，' 1s '，function()=)
这个。风格。transform=' scale(1)'；
这个。风格。不透明度=' 0
}、函数()
//在这里表示图片缩放的运动已经全部完成了，接着走第二个运动
最终结果；
if(end num==img。长度)>
//所有的运动都完成了
//console.log('所有的运动都完成了)
rotate()；
//end num=0；
}
});
});
}、数学。random()* 1000；
})(一)；
}
}:
//旋转功能
函数旋转()
S7-1200可编程控制器：iimgs。长度；>
//给运动来一下初始化
img[I]。风格。过渡='；
/* img[I]。风格。不透明度=1:*/
img[I]。风格。transform=' rotate ey(0度)转换(-数学。random()* 500 ' px)"；
//运动来了，自执行函数
（函数(一)}
setTimeout(function()).
motion(img[I]，2s，function()).
这个。风格。不透明=1；
这个。风格。transform='旋转y(-360度)平移(0)";
}、函数()
终语-;//因为在上次运动结束的时候，结尾的值已经加到了50了
//console.log(尾注):
if(endNum==0)>
//所有的运动都完成了
canclick=true
//endNum=0
}
});
}、数学。random()* 1000；
})(一)；
}
}
//运动函数
函数动作(obj、timer、doFn、callback)}
//运动(运动对象，运动时间（字符串单位),运动属性（函数),运动结束后的回调函数)
obj.style.transition=timer:
doFn。呼叫(obj)；//改变对象
var end=true://用来知道过渡有没有完成一次
//结束事件处理函数
函数endfn()
如果(结束)}
//回调回调。呼叫(obj):
如果(回调)
回调。呼叫(obj):
}
end=false://改成假的，下次就不会走这个如果是了
}
obj。removeeventlistener(' transitional end，end n)；//结束后就把这个事件取消掉，要不它会一直带在身上
}
addEventListener物件(transitionend，end):
}
}:
/脚本
/头
体表
div id='imgWrap '
img src=' images/1。jpg ' alt='/
img src=' images/2。jpg ' alt='/
img src=' images/3。jpg ' alt='/
img src=' images/4。jpg ' alt='/
img src=' images/5。jpg ' alt='/
img src=' images/6。jpg ' alt='/
img src=' images/7。jpg ' alt='/
img src=' images/8。jpg ' alt='/
img src=' images/9。jpg ' alt='/
img src=' images/10。jpg ' alt='/
img src=' images/11。jpg ' alt='/
img src=' images/12。jpg ' alt='/
img src=' images/13。jpg ' alt='/
img src=' images/14。jpg ' alt='/
img src=' images/15。jpg ' alt='/
img src=' images/16。jpg ' alt='/
img src=' images/17。jpg ' alt='/
img src=' images/18。jpg ' alt='/
img src=' images/19。jpg ' alt='/
img src=' images/20。jpg ' alt='/
img src=' images/21。jpg ' alt='/
img src=' images/22。jpg ' alt='/
img src=' images/23。jpg ' alt='/
img src=' images/24。jpg ' alt='/
img src=' images/25。jpg ' alt='/
img src=' images/26。jpg ' alt='/
img src=' images/27。jpg ' alt='/
img src=' images/28。jpg ' alt='/
img src=' images/29。jpg ' alt='/
img src=' images/30。jpg ' alt='/
img src=' images/31。jpg ' alt='/
img src=' images/32。jpg ' alt='/
img src=' images/33。jpg ' alt='/
img src=' images/34。jpg ' alt='/
img src=' images/35。jpg ' alt='/
img src=' images/36。jpg ' alt='/
img src=' images/37。jpg ' alt='/
img src=' images/38。jpg ' alt='/
img src=' images/39。jpg ' alt='/
img src=' images/40。jpg ' alt='/
img src=' images/41。jpg ' alt='/
img src=' images/42。jpg ' alt='/
img src=' images/43。jpg ' alt='/
img src=' images/44。jpg ' alt='/
img src=' images/45。jpg ' alt='/
img src=' images/46。jpg ' alt='/
img src=' images/47。jpg ' alt='/
img src=' images/48。jpg ' alt='/
img src=' images/49。jpg ' alt='/
img src=' images/50。jpg ' alt='/
/div
Div=' BTN '点击查看效果/div
/body
/html
以上JavaScript CSS相册特效示例代码是边肖分享的全部内容。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。