一款4种效果的图片相册特效代码,每一种的相册展开方式都不同,有水平展开的,有从中间展开的,有扩展为网格布局的,图片的标题和说明文字均可自由设置,喜欢的童鞋请收下吧。
页面的head部分,仅需引入一个CSS样式文件即可,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,不难看出其实就是ul标签组成的多个图片列表,代码如下:
<header class="hero">
<h1>4种效果的图片相册</h1>
<p>点击每一个查看效果</p>
</header>
<ul class="cards">
<li class="title">
<h2>向右扩展</h2>
</li>
<li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
</ul>
<hr/>
<ul class="card-stacks">
<li class="title">
<h2>展开为网格布局</h2>
</li>
<li class="stack stack-1">
<ul class="cards-down">
<li class="card card-1"><img src="http://lorempixel.com/401/250/city"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-2"><img src="http://lorempixel.com/401/250/food"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-3"><img src="http://lorempixel.com/401/250/animals"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
</ul>
</li>
<li class="stack stack-2">
<ul class="cards-down">
<li class="card card-1"><img src="http://lorempixel.com/402/250/city"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-2"><img src="http://lorempixel.com/402/250/food"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-3"><img src="http://lorempixel.com/402/250/animals"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
</ul>
</li>
<li class="stack stack-3">
<ul class="cards-down">
<li class="card card-1"><img src="http://lorempixel.com/403/250/city"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-2"><img src="http://lorempixel.com/403/250/food"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-3"><img src="http://lorempixel.com/403/250/animals"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
</ul>
</li>
</ul>
<hr/>
<ul class="cards-split">
<li class="title">
<h2>从中间分开</h2>
</li>
<li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
</ul>
<hr/>
<ul class="cards-split-delay">
<li class="title">
<h2>从中间缓慢分开</h2>
</li>
<li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
<li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
<div class="content">
<h1>图片标题</h1>
<p>图片描述</p>
</div>
</li>
</ul>
页面的底部,需远程调用jQuery库,并引入本地的JS文件,代码如下:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791