下面来介绍下我按照网上的视频讲解实现的照片墙效果图。
最终实现的效果包括如下：
•当点击某张图片时，该图片移到中间区域并放大显示。当图片被点击时正反面切换显示。
•某张图片被点击时，所有的图片的位置被随机重排
•某个控制按钮被点击时，对应的图片显示到正中间，控制按钮进行相应的样式切换。当连续点击某个控制按钮时，图片伴随着按钮的点击进行正反面切换
对整个效果进行VCD分解，如下图：
按照计算机能理解的方式来分解案例。
•View视觉 ： HTML + css 基本界面模板
•Controller : Javascript 内容处理、事件处理
•Data数据 ：data.js 非必须，助于理解
Data数据是很常用的，如果将内容写死到View即HTML中，当要去改变内容的时候就得修改HTML,但是使用VCD的话就只需要修改数据部分就可以了。同时，一般数据部分是由后台生成的，这样的替换就更为方便。这个案例中的海报都是由模板加上数据生成的。
View 部分
对效果区域进行模块分解，分解为如下三个部分：
•当前展现的海报区
水平垂直居中
允许被<控制条按钮>控制展现&翻转
•左右存放区域
以<当前展现的海报区>切分为左右区域
作用是存放其它的海报
每个海报位置随机，角度随机
•控制条区
控制&展现对应的海报
翻面切换<当前展现海报>正反面
实现的html代码如下：
<body onselectstart = 'return false;'><!--这里防止页面的文字被选中--> <!-- 2.改写视图为模板字符串 --> <div> <!-- div.photo负责平移和旋转 --> <div onclick = "turn(this)"> <!-- div.photo-wrap 负责正反面翻转--> <div> <div> <p><img src="https://www.jb51.net/photo/{{img}}" alt=""></p> <p>{{caption}}</p> </div> <div> <p>{{desc}}</p> </div> </div> </div> </div>
这里的{{img}}、{{caption}}、{{desc}}就是模板字符串，后面会数据部分进行相应但是替换。
view部分的样式如下：
<style type="text/css"> *{ padding:0; margin:0; } body{ background-color:#fff; color:#555; font-family:'Avenir Next','Lantinghei SC'; font-size:14px; -moz-font-smoothing:antialiased; -webkit-font-smoothing:antialiased;/*字体平滑*/ } .wrap{ //图片区域在body中垂直居中 width:100%; height:900px; position:absolute; /*-------------------下面两行实现了垂直居中------------- top:50%; margin-top:-300px; /*----------下面这四行也是实现垂直居中的一种方式-----------------*/ top:0; bottom:0; margin-top:auto; margin-bottom:auto; /*------------------------------------------------------------*/ background-color:#333; overflow:hidden; -moz-perspective:800px; -webkit-perspective:800px;//让子元素获得3D元素支持，这里是设置子元素距离视图的位置 } /*海报样式*/ .photo{ width:260px; height:320px; /*因为每个海报都是利用top和left随机定位的，所以将position设置为absolute*/ position:absolute; z-index:1; box-shadow:0 0 1px rgba(0,0,0,.01); /*transform:rotateY(30deg);*/ -moz-transition:all .6s; /*让海报移动产生动画效果*/ -webkit-transition:all .6s; } .photo .side{ width:100%; height:100%; background-color:#eee; position:absolute; top:0; right:0; padding:20px; box-sizing:border-box; } .photo .side-front .image{ width:100%; height:250px; line-height:250px; overflow:hidden; } .photo .side-front .image img{ width:100%; } .photo .side-front .caption{ text-align:center; font-size:16px; line-height:50px; } .photo .side-back .desc{ color:#666; font-size:14px; line-height:1.5em; } /*当前选中的海报样式*/ .photo_center{ /*---实现垂直居中的方式一 left:50%; top:50%; margin-left:-130px; margin-top:-160px; */ /*实现垂直居中的方式二*/ top:0; bottom:0; left:0; right:0; margin:auto; z-index:999;//让当前选中的海报不被其他的海报覆盖 } /*负责翻转*/ .photo-wrap{ position:absolute; width:100%; height:100%; -moz-transform-style:perserve-3d; -webkit-transform-style:preserve-3d;/*让里面的元素支持3d的效果*/ transform-style:preserve-3d;/*因为掉了这一句，firefox中的背面一直显示不出来*/ -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; } .photo-wrap .side{ -moz-backface-visibility:hidden;//当屏幕不面向屏幕时被隐藏 -webkit-backface-visibility:hidden; backface-visibility:hidden; } .photo-wrap .side-front{ -moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } .photo-wrap .side-back{ -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); } .photo-front .photo-wrap{ -moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } .photo-back .photo-wrap{ -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); } /*控制按钮的样式*/ .nav{ width:40%; height:30px; line-height:30px; position:absolute; left:30%; bottom:20px; z-index:999; /*background-color:#fff;*/ text-align:center; } /*普通样式*/ .nav .i{ width:30px; height:30px; display:inline-block; cursor:pointer; background-color:#aaa; text-align:center; border-radius:50%; -moz-transform:scale(.48); -webkit-transform:scale(.48); transform:scale(.48); -webkit-transition:all 1s; -moz-transition:all 1s; } .nav .i:after{ } /*当前选中样式*/ .nav .i_current{ -moz-transform:scale(1); -webkit-transform:scale(1); } .nav .i_current:after{ opacity:1; } /*背面样式*/ .nav .i_back{ -moz-transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); background-color:#555; } /*样式优化，*/ .photo{/*定义下面的是为了消除图片突然的闪动*/ left:50%; top:50%; margin:-160px 0 0 -130px; } .photo-wrap{ -moz-transform-origin:0% 50%; -webkit-transform-origin:0% 50%; } .photo-front .photo-wrap{ -moz-transform:translate(0px,0px) rotateY(0deg); -webkit-transform:translate(0px,0px) rotateY(0deg); } .photo-back .photo-wrap{ -moz-transform:translate(260px,0px) rotateY(180deg); -webkit-transform:translate(260px,0px) rotateY(180deg); }
下面来解释下样式中的一些重要部分。
案例中的设置:-webkit-perspective:800px;
