4种效果的图片相册

来源:https://www.sucaihuo.com/js/2640.html 2017-08-04 23:21浏览(1040) 收藏

一款4种效果的图片相册特效代码,每一种的相册展开方式都不同,有水平展开的,有从中间展开的,有扩展为网格布局的,图片的标题和说明文字均可自由设置,喜欢的童鞋请收下吧。
4种效果的图片相册
分类:图片代码 > 图片墙 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2