照片旋转

以下是来自Alex Young (@the_alexyoung) 的客座文章。 Alex 创建了一种简单的技巧，只需隐藏和显示从不同角度拍摄的多个叠加照片，即可“旋转”照片的主题。 尽情享受！

网页设计师和开发人员总是以有趣且引人入胜的方式与我们互动，这让我们着迷。 我喜欢发现这些设计师/开发人员想出的新技巧。 我特别感兴趣的一种技巧是在Warby Parker 的网站上看到的。 他们能够创造出一种很酷的效果，模型跟随用户的鼠标，展示镜框的不同角度。

我看到这种技巧主要用于展示太阳镜，但我对你们想出其他现实世界中的应用感到好奇。

在我们开始之前，您需要一些东西。 确切地说，是七样东西。 您将需要从七个不同角度拍摄的七张照片。

HTML 设置

我们正在设置一个名为“faces”的容器，然后创建一个区域，我们将在其中显示照片——“face-area”。 我们还有一个div 来容纳七张单独的图像。

<div id="faces">

  <div id="face-area">

    <div id="image-1" style="display: none;">
      <img src="/images/look-left-3.jpg">
    </div>

    <div id="image-2" style="display: none;">
      <img src="/images/look-left-2.jpg">
    </div>

    <div id="image-3" style="display: none;">
      <img src="/images/look-left-1.jpg">
    </div>

    <div id="image-4" style="display: none;">
      <img src="/images/look-center.jpg">
    </div>

    <div id="image-5" style="display: none;">
      <img src="/images/look-right-1.jpg">
    </div>

    <div id="image-6" style="display: none;">
      <img src="/images/look-right-2.jpg">
    </div>

    <div id="image-7" style="display: none;">
      <img src="/images/look-right-3.jpg">
    </div>

现在我们将创建一个div，它将完全按照其名称暗示的那样工作。 它将放在另一个div 的顶部。 我们可以将此div 分成 7 个小列，并在其上平均分配。 这 7 列将用于监听鼠标何时悬停在特定列上。 在每个div 中添加“data-number”将允许我们稍后在 jQuery 中引用每个div。

    <div id="the_faces_overlay">
      <div class="the_faces" data-number="1"></div>
      <div class="the_faces" data-number="2"> </div>
      <div class="the_faces" data-number="3"></div>
      <div class="the_faces" data-number="4"></div>
      <div class="the_faces" data-number="5"></div>
      <div class="the_faces" data-number="6"></div>
      <div class="the_faces" data-number="7"></div>
    </div> 

  </div><!-- END #face-area -->

</div> <!-- END #faces --> 

CSS 设置

大多数 CSS 都是不言自明的。 我需要提一点很重要的事情，确保这 7 列完美地跨越div 的span 相互配合。

body {
  background: #333 
}

#faces {
  height: 333px;
  width: 500px;
  margin: 0 auto;
  border: 8px solid white;
}

#face-area {
  height: 500px;
  width: 333px;
  position: relative;
}

#the_faces_overlay {
  position: absolute;
  width: 500px;
  top: 0;
  left: 0;
}

#faces .the_faces {
  height: 333px;
  width: 14.2857143%;
  float: left;
  margin: 0;
  padding: 0;
}

jQuery 设置

我们需要监听每列何时被悬停。 这就是“data-numbers”派上用场的地方。 如果我们想在将来添加更多列，我们就不必再添加任何 JavaScript 了。

// Reveal the "center" image
var centerImage = $("#image-4").show();

// Bind hovers to each column
$(".the_faces").each(function() {

  $(this).on("mouseover", function() {
  
    $("#image-" + $(this).attr("data-number")).show();
  
  }).on("mouseout",function() {
  
    $("#image-" + $(this).attr("data-number")).hide();

  });
  
});

// Reset center image
$("#face-area").on("mouseleave", function() {
  centerImage.show();
}).on("mouseenter", function() {
  centerImage.hide();
});

好了！

Check out this Pen!

有了！ 现在您有了自己的转头模型。 用它来展示您自己的产品。 这有很多用途。 告诉我您想出什么。

编辑注： 这是一个有趣的工作示例，可以添加触摸支持，不是吗？ 跟着滑动或类似的东西。