javascript实例分享—具有立体效果的图片特效

下面是关于“JavaScript实例分享---具有立体效果的图片特效”的完整攻略。

一、需求分析

在页面上呈现出一组有立体感的图片特效，使得用户能够得到更佳的使用体验和视觉效果。

二、技术方案

我们可以借助JavaScript来实现这个需求。具体实现步骤如下：

1. 在HTML中使用<img>标签来加载需要呈现的图片
2. 使用CSS对这些图片进行基本的样式设置，如设置宽高、边框、居中等
3. 利用JavaScript来实现鼠标滑过图片时图片位置产生微小变化的效果，达到立体感的视觉效果

其中，第3步是关键。我们可以通过使用JavaScript的onmouseover和onmouseout事件，来实现图片的微小位置变化。

三、具体实现

1. HTML

首先，在HTML中，我们需要添加图片的<img>标签。如下：

<div class="pic-container">
  <img src="https://picsum.photos/200/300" alt="pic">
  <img src="https://picsum.photos/200/300" alt="pic">
  <img src="https://picsum.photos/200/300" alt="pic">
  <img src="https://picsum.photos/200/300" alt="pic">
</div>

这里我们使用了<div>标签来包裹这些图片，方便后面设置样式。这里只展示了4个图片，实际可以根据需求加大或减小数量。

2. CSS

然后，我们在CSS中为这些图片设置宽高、边框、圆角等基本样式。如下：

.pic-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic-container img {
  width: 200px;
  height: 300px;
  margin: 0 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: transform .5s;
}

这里我们使用了Flex布局来实现图片居中显示，并设置了图片的基本样式。关键是最后一行，我们设置了图片在执行transform变化时需要经过0.5秒。

3. JavaScript

最后，我们需要使用JavaScript来实现鼠标滑过图片时的微小位置变化，以达到立体感的效果。代码如下：

var pics = document.querySelectorAll('.pic-container img');
var delta = 10; // 图片移动的距离

// 添加鼠标滑过事件
pics.forEach(function (item, index) {
  item.onmouseover = function (e) {
    movePic(true, e, this);
  }
  item.onmouseout = function (e) {
    movePic(false, e, this);
  }
})

// 移动图片
function movePic(isOver, e, pic) {
  var rect = pic.getBoundingClientRect();
  var centerX = rect.x + rect.width / 2;
  var centerY = rect.y + rect.height / 2;
  var offsetX = (e.clientX - centerX) / 10;
  var offsetY = (e.clientY - centerY) / 10;

  if (isOver) {
    pic.style.transform = "translate(" + offsetX + "px, " + offsetY + "px) scale(1.1)";
  } else {
    pic.style.transform = "translate(0, 0) scale(1)";
  }
}

代码解析：

1. 利用document.querySelectorAll方法选中所有的图片，并添加鼠标滑过事件。
2. 在鼠标滑过事件中，调用movePic函数。该函数用于计算每个图片应该移动的偏移量，并将偏移量应用到当前图片的样式当中。同时，还将图片放大到1.1倍，以达到立体感的效果。
3. 在鼠标滑出事件中，将图片恢复原来的大小和位置并删除偏移量的样式。

4. 示范

我们可以在这里 Codepen示例 进行演示。

四、总结

通过本文的介绍，我们了解了如何使用JavaScript来实现具有立体效果的图片特效。通过使用相关的事件和CSS属性，以及计算图片位置偏移量的方法，我们最终实现了这个效果。希望对您有所帮助。