jquery+CSS3实现3D拖拽相册效果

下面是详细讲解 “jquery+CSS3实现3D拖拽相册效果”的完整攻略。

简介

本文将介绍一种使用jquery+CSS3实现3D拖拽相册效果的方法，该效果可以应用到博客、个人网站等需要图片展示的网站上，增强网站的视觉效果，提升用户体验。

实现思路

实现一个3D拖拽相册效果的基本思路如下：

1. 使用HTML/CSS搭建相册的框架；
2. 使用jQuery实现图片的拖拽；
3. 使用CSS3实现图片的3D旋转效果。

代码实现

HTML/CSS部分

首先，我们需要用HTML/CSS来实现相册的框架。下面是一个示例代码：

<div class="album">
  <ul class="images">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
    <li><img src="image5.jpg"></li>
    <li><img src="image6.jpg"></li>
  </ul>
</div>


.album {
  width: 500px;
  height: 300px;
  perspective: 1000px;
  margin: 50px auto;
}
.images {
  list-style: none;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 1s;
}
.images li {
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 0 0 0 -125px;
  left: 50%;
  top: 25px;
}
.images img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: move;
}

在上述代码中，<div class="album">是相册的外层容器，.images是相册内的图片容器，.images li是每个图片项，.images img是每个图片占位符。其中，.album设置了透视距离，用于实现3D效果；.images和.images li设置了绝对定位，并且设置了transform-style: preserve-3d;和transform-origin: 50% 50%;，用于实现3D旋转效果。

jQuery部分

接下来，我们需要使用jQuery来实现图片的拖拽，下面是示例代码：

$('.images img').on('mousedown', function(e) {
  var $this = $(this),
      start = { x: e.pageX, y: e.pageY },
      pos = { x: parseInt($this.parent().css('left')), y: parseInt($this.parent().css('top')) };
  $(document).on('mousemove.drag', function(e) {
    var x = pos.x + e.pageX - start.x,
        y = pos.y + e.pageY - start.y;
    $this.parent().css({ left: x, top: y });
  }).on('mouseup.drag', function(e) {
    $(document).off('.drag');
  });
});

在上述代码中，我们为每个图片项的图片占位符绑定了mousedown事件，并在事件处理程序中记录了鼠标按下时的位置和图片项的当前位置。在mousemove事件处理程序中，计算出移动距离，并使用css()方法实时更新图片项的位置。在mouseup事件处理程序中解绑事件。

CSS3部分

最后，我们需要使用CSS3来实现3D旋转效果，下面是示例代码：

$('.album').on('mousemove', function(e) {
  var x = e.offsetX,
      y = e.offsetY,
      w = $(this).width(),
      h = $(this).height(),
      angleY = (x - w/2) / w * 30,
      angleX = -(y - h/2) / h * 30,
      transform = 'perspective(1000px) rotateX(' + angleX + 'deg) rotateY(' + angleY + 'deg)';
  $('.images').css({ transform: transform });
});

在上述代码中，我们为相册容器绑定了mousemove事件，并在事件处理程序中计算出鼠标相对于相册容器的位置以及旋转角度。最后，使用css()方法更新.images的transform属性。

使用示例

下面是一个3D拖拽相册的完整示例代码：

<div class="album">
  <ul class="images">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
    <li><img src="image5.jpg"></li>
    <li><img src="image6.jpg"></li>
  </ul>
</div>


.album {
  width: 500px;
  height: 300px;
  perspective: 1000px;
  margin: 50px auto;
}
.images {
  list-style: none;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 1s;
}
.images li {
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 0 0 0 -125px;
  left: 50%;
  top: 25px;
}
.images img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: move;
}


$('.images img').on('mousedown', function(e) {
  var $this = $(this),
      start = { x: e.pageX, y: e.pageY },
      pos = { x: parseInt($this.parent().css('left')), y: parseInt($this.parent().css('top')) };
  $(document).on('mousemove.drag', function(e) {
    var x = pos.x + e.pageX - start.x,
        y = pos.y + e.pageY - start.y;
    $this.parent().css({ left: x, top: y });
  }).on('mouseup.drag', function(e) {
    $(document).off('.drag');
  });
});


$('.album').on('mousemove', function(e) {
  var x = e.offsetX,
      y = e.offsetY,
      w = $(this).width(),
      h = $(this).height(),
      angleY = (x - w/2) / w * 30,
      angleX = -(y - h/2) / h * 30,
      transform = 'perspective(1000px) rotateX(' + angleX + 'deg) rotateY(' + angleY + 'deg)';
  $('.images').css({ transform: transform });
});

以上就是使用jquery+CSS3实现3D拖拽相册效果的完整攻略。