全屏网格折叠动画插件

《全屏网格折叠动画插件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、前言Duang，Duang，Duang，博主又来分享插件了，这次是一个炫酷的网格折叠动画效果，其原理模拟纸板折叠过程的动画，页面使用了大量CSS3属性，具体效果请看演示页面（建议使用新版谷歌、火狐浏览器观看，对于ie9以下不支持CSS3属性的浏览器不兼容）。博主个人建议：这个效果可以用于网站引导用户进行操作，或者在页面资源加载较多时作为信息展示页面使用。线上演示地址：https://yangyunhe369.github.io/jQuery-Flod-Grid/github地址：https://github.com/ya

2、ngyunhe369/jQuery-Flod-Grid演示一 演示二ps：github地址有代码演示，以及插件源码可供参考，线上演示地址可供预览。插件逻辑分析这个插件逻辑之前，先说一下实现动画效果的CSS3属性：transform-origin。这个属性主要用于设置旋转元素的基点位置，就是用于改变网格翻转时基点，因为默认网格翻转是以网格中心点为基点进行翻转，这样的动画效果不符合我们预期。下面这张图大概讲解了一下transform-origin属性配合rotate属性实现网格翻转动画的原理。在这张图里，你会看到每个网格对应

3、一个数字，这是方便理解整体网格区域与窗口显示区域的关系。整体网格容器是由33个网格组成，一共分为3排，每排11个。在我们的可视区域内，如果不算上屏幕两边的半个网格区域，一共有6个网格，所有还有5个网格（包括未显示完整的网格）未显示。可以根据序号得出左边有3个网格（0、1、2），右边有2个网格（9、10）隐藏了。ps:这里的序号对应每个网格排列的序号（从0开始计算）下面是分解动画的过程：从这里可以观察出，每排的网格都会逐渐向中心折叠，这里的中心元素分别对应序号5（第6个网格）、16（第17个网格）、27（第28个网格）。当

4、第一排和第三排网格都折叠完毕时，第一排网格和第三排网格（5、27）朝向网格16折叠，最后网格16的原点基于中心的进行折叠。这就是所有网格动画的一个完整的执行过程。源码解析下面展示一下源码：//定义基础变量，以及插件apivar_ops=$.extend({    shadeTime:1000,//遮罩层遮挡网格时长    flodTime:1000,//初始化页面执行网格折叠动画的延迟时长    showBtnTime:4500,//折叠动画开始至显示按钮的延迟时长    loading_zzc:'loading_zzc

5、',//遮罩层的class    loading_btns:'loading_btns',//网格动画控制按钮的class    btn_logo:'btn_logo',//网格动画控制按钮子元素的class    preloader:'preloader',//网格容器的class    square_box:'square_box',//网格容器子元素的class    square:'square'//网格的class},options);var$this=$(this),    _shadeTime=_ops.s

6、hadeTime,//遮罩层遮挡网格时长    _flodTime=_ops.flodTime,//初始化页面执行网格折叠动画的延迟时长    _showBtnTime=_ops.showBtnTime,//折叠动画开始至显示按钮的延迟时长    _loading_zzc=_ops.loading_zzc,//遮罩层的class    _loading_btns=_ops.loading_btns,//网格动画控制按钮的class    _btn_logo=_ops.btn_logo,//网格动画控制按钮子元素的clas

7、s    _preloader=_ops.preloader,//网格容器的class    _square_box=_ops.square_box,//网格容器子元素的class    _square=_ops.square;//网格的class以下是关于网格折叠动画的代码：varp='perspective(600px)';//定义3D元素距视图的距离for(vari=0;i<5;i++){  $('.'+_square).eq(i).css({'transform':p+'rotateY(-90deg)','tra

8、nsition-delay':(i+1)0.3+'s'});}for(varj=11;j>5;j--){  $('.'+_square).eq(j).css({'transform':p+'rotateY(90deg)','transition-delay':(11-j)0.3+'s'});}for(vark=12;