下面来介绍下我按照慕课网上的视频讲解实现的照片墙效果图。
- 当点击某张图片时,该图片移到中间区域并放大显示。当图片被点击时正反面切换显示。
- 某张图片被点击时,所有的图片的位置被随机重排
- 某个控制按钮被点击时,对应的图片显示到正中间,控制按钮进行相应的样式切换。当连续点击某个控制按钮时,图片伴随着按钮的点击进行正反面切换
对整个效果进行VCD分解,如下图:
按照计算机能理解的方式来分解案例。
- View视觉 : HTML + css 基本界面模板
- Controller : Javascript 内容处理、事件处理
- Data数据 :data.js 非必须,助于理解
Data数据是很常用的,如果将内容写死到View即HTML中,当要去改变内容的时候就得修改HTML,但是使用VCD的话就只需要修改数据部分就可以了。同时,一般数据部分是由后台生成的,这样的替换就更为方便。这个案例中的海报都是由模板加上数据生成的。
View 部分
对效果区域进行模块分解,分解为如下三个部分:
- 当前展现的海报区
允许被<控制条按钮>控制展现&翻转
- 左右存放区域
作用是存放其它的海报
每个海报位置随机,角度随机
- 控制条区
翻面切换<当前展现海报>正反面
实现的html代码如下:
<body onselectstart = 'return false;'><!--这里防止页面的文字被选中-->
<!-- 2.改写视图为模板字符串 -->
<div class="wrap" id="wrap">
<!-- div.photo负责平移和旋转 -->
<div class="photo photo-front" onclick = "turn(this)" id="photo_{
{index}}">
<!-- div.photo-wrap 负责正反面翻转-->
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="photo/{
{img}}" alt=""></p>
<p class="caption">{
{caption}}</p>
</div>
<div class="side side-back">
<p class="desc">{
{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;
*/
/*实现垂直居中的方式二*/
t