CSS3+JS 实现超炫的散列画廊特效

下面来介绍下我按照慕课网上的视频讲解实现的照片墙效果图。


最终实现的效果包括如下:

  • 当点击某张图片时,该图片移到中间区域并放大显示。当图片被点击时正反面切换显示。
  • 某张图片被点击时,所有的图片的位置被随机重排
  • 某个控制按钮被点击时,对应的图片显示到正中间,控制按钮进行相应的样式切换。当连续点击某个控制按钮时,图片伴随着按钮的点击进行正反面切换
对整个效果进行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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值