仿宝丽莱Polaroid图片相册画廊

PetitQ 图片/图形 2018-11-18 1.53K 0 0

这是一款使用纯 js 和 CSS3 制作的仿宝丽莱 Polaroid 图片相册画廊。开始时所有的图片被制作为 Polaroid 图片，堆叠放在一起。当用户使用鼠标 hover 图片时，图片会展开。点击图片时，最上面的图片会切换到最下面去。

HTML 结构

该宝丽莱 Polaroid 图片相册画廊的基本 HTML 结构如下：

也想出现在这里？联系我们吧

```
<div class='images'>
```
```
  <img class='image' src='img/1.jpg'>
```
```
  <img class='image' src='img/2.jpg'>
```
```
  <img class='image' src='img/3.jpg'>
```
```
  <img class='image' src='img/4.jpg'>
```
```
  <img class='image' src='img/5.jpg'>
```
```
</div>
```

CSS 样式

宝丽莱 Polaroid 图片相册画廊的基本 CSS 样式如下：

```
.image {
```
```
  position: absolute;
```
```
  top: 50%;
```
```
  left: 50%;
```
```
  height: 200px;
```
```
  width: 200px;
```
```
  margin-top: -110px;
```
```
  margin-left: -105px;
```
```
  border: 5px solid #fff;
```
```
  border-bottom-width: 15px;
```

  -moz-box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25);

  -webkit-box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25);

  box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25);

```
  z-index: 2;
```

  -moz-transition: -moz-transform 0.3s ease-in-out;

  -o-transition: -o-transform 0.3s ease-in-out;

  -webkit-transition: -webkit-transform 0.3s ease-in-out;

  transition: transform 0.3s ease-in-out;

```
}
```
```
 
```
```
.image:first-child {
```
```
  -moz-transform: rotate(8deg);
```
```
  -ms-transform: rotate(8deg);
```
```
  -webkit-transform: rotate(8deg);
```
```
  transform: rotate(8deg);
```
```
}
```
```
 
```
```
.image:nth-child(2) {
```
```
  -moz-transform: rotate(2deg);
```
```
  -ms-transform: rotate(2deg);
```
```
  -webkit-transform: rotate(2deg);
```
```
  transform: rotate(2deg);
```
```
}
```
```
 
```
```
.image:nth-child(3) {
```
```
  -moz-transform: rotate(-3deg);
```
```
  -ms-transform: rotate(-3deg);
```
```
  -webkit-transform: rotate(-3deg);
```
```
  transform: rotate(-3deg);
```
```
}
```
```
 
```
```
.image:nth-child(4) {
```
```
  -moz-transform: rotate(-10deg);
```
```
  -ms-transform: rotate(-10deg);
```
```
  -webkit-transform: rotate(-10deg);
```
```
  transform: rotate(-10deg);
```
```
}
```
```
 
```
```
.image:last-child {
```
```
  -moz-transform: rotate(-5deg);
```
```
  -ms-transform: rotate(-5deg);
```
```
  -webkit-transform: rotate(-5deg);
```
```
  transform: rotate(-5deg);
```
```
}                  
```
```
 
```

当鼠标hover图片时，使用下面的代码来制作图片展开动画效果。

```
.images:hover .image:nth-child(4) {
```

  -moz-transform: rotate(10deg) translateX(50px);

  -ms-transform: rotate(10deg) translateX(50px);

  -webkit-transform: rotate(10deg) translateX(50px);

  transform: rotate(10deg) translateX(50px);

```
}
```
```
 
```
```
.images:hover .image:nth-child(3) {
```

  -moz-transform: rotate(3deg) translateX(75px);

  -ms-transform: rotate(3deg) translateX(75px);

  -webkit-transform: rotate(3deg) translateX(75px);

  transform: rotate(3deg) translateX(75px);

```
}
```
```
 
```
```
.images:hover .image:nth-child(2) {
```

  -moz-transform: rotate(-2deg) translateX(-50px);

  -ms-transform: rotate(-2deg) translateX(-50px);

  -webkit-transform: rotate(-2deg) translateX(-50px);

  transform: rotate(-2deg) translateX(-50px);

```
}
```
```
 
```
```
.images:hover .image:first-child {
```

  -moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);

  -ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);

  -webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);

  transform: rotate(-8deg) translateX(-75px) translateY(-10px);

```
}
```
```
 
```
```
.image.slide-right {
```

  -moz-transform: rotate(290deg) translateX(250px);

  -ms-transform: rotate(290deg) translateX(250px);

  -webkit-transform: rotate(290deg) translateX(250px);

  transform: rotate(290deg) translateX(250px);

```
}
```
```
 
```
```
.image.slide-left {
```

  -moz-transform: rotate(-290deg) translateX(-250px);

  -ms-transform: rotate(-290deg) translateX(-250px);

  -webkit-transform: rotate(-290deg) translateX(-250px);

  transform: rotate(-290deg) translateX(-250px);

```
}
```
```
 
```
```
.image.back { z-index: 1; }
```

JavaScript

最后通过下面的 javascript 代码来完成鼠标点击的交互动画效果。

```
(function() {
```

  var cssTransition, imageOffset, imageWidth, images, queue, timeout, touch;

```
 
```
```
  cssTransition = function() {
```

    var body, i, len, style, vendor, vendors;

    body = document.body || document.documentElement;

```
    style = body.style;
```
```
    vendors = ['Moz', 'Webkit', 'O'];
```

    if (typeof style['transition'] === 'string') {

```
      return true;
```
```
    }
```

    for (i = 0, len = vendors.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}

```
      vendor = vendors[i];
```

      if (typeof style[vendor + 'Transition'] === 'string') {

```
        return true;
```
```
      }
```
```
    }
```
```
window.CP.exitedLoop(1);
```
```
 
```
```
    return false;
```
```
  };
```
```
 
```
```
  queue = false;
```
```
 
```

  touch = document.documentElement['ontouchstart'] !== void 0;

```
 
```

  images = document.querySelector('.images');

```
 
```

  imageWidth = images.firstElementChild.offsetWidth;

```
 
```

  imageOffset = images.firstElementChild.offsetLeft;

```
 
```

  timeout = cssTransition() ? [300, 400] : [0, 0];

```
 
```

  images.addEventListener((touch ? 'touchend' : 'click'), function(event) {

```
    var direction, lastClassList;
```
```
    if (queue) {
```
```
      return;
```
```
    }
```
```
    queue = true;
```

    if (((touch ? event.changedTouches[0].pageX : event.pageX) - imageOffset) > imageWidth / 2) {

```
      direction = 'slide-right';
```
```
    } else {
```
```
      direction = 'slide-left';
```
```
    }
```

    lastClassList = images.lastElementChild.classList;

```
    lastClassList.add(direction);
```
```
    return setTimeout(function() {
```
```
      lastClassList.remove(direction);
```
```
      lastClassList.add('back');
```
```
      return setTimeout(function() {
```

        images.insertBefore(images.lastElementChild, images.firstElementChild);

```
        lastClassList.remove('back');
```
```
        return queue = false;
```
```
      }, timeout[0]);
```
```
    }, timeout[1]);
```
```
  }, false);
```
```
 
```
```
}).call(this);
```

仿宝丽莱 Polaroid 图片相册画廊

已有 383 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

仿宝丽莱Polaroid图片相册画廊

HTML 结构

CSS 样式

JavaScript

仿宝丽莱 Polaroid 图片相册画廊

相关文章

CSS3图片鼠标悬停动态模糊效果

HTML5+CSS3图片手风琴动画效果

多层图片视觉差互动jQuery特效插件

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

JavaScript

仿宝丽莱 Polaroid 图片相册画廊

相关文章

发表回复 取消回复

热销模板

发表回复取消回复