css view 图像缩放_如何创建纯CSS onClick图像缩放效果

CSS没有用于定位点击事件的伪类，这是前端开发人员最大的痛点之一。 最接近的伪类是:active ，它在用户将鼠标按在元素上的时间段内为元素设置样式。

但是，这种效果是短暂的：用户释放鼠标后， :active不再起作用。 我们需要找到其他方法来模拟CSS中的click事件 。

这篇文章是为响应读者的请求而写的 ，它将说明如何在特定用例image zoom中使用纯CSS定位click事件 。

您可以在下面看到最终结果— 单击时仅使用CSS 缩放图像的解决方案。

何时使用仅CSS解决方案

在继续之前，我想说的是，对于图像缩放，我建议仅在希望单个或一组少数图像具有缩放功能的情况下，使用仅CSS的方法（该方法会更改图像的尺寸）。

对于一个合适的画廊，JavaScript提供了更多的灵活性和效率。

我们将使用的前端技术

提醒您，我们快速浏览一下我们将要使用的3种关键技术 ：

1. <map> HTML标记 ，允许浏览器在图像上创建可链接区域 。 在我先前的文章中 ，在<map>元素上阅读更多内容。
2. <img>标签的usemap 属性 ，它将图像连接到图像映射。
3. :target CSS伪类 ，表示使用其ID选择器作为目标的元素。

1.创建HTML库

首先，让我们创建HTML基础。 在下面的代码中，我们添加了要缩放和扩展的图像，以及用于放大和缩小的 关闭按钮图标 。

<img id="img1" class="img" src="http://bit.ly/2acrH5J" />
<a href="#" class="close"></a>
<img class="expand" src="Expand-icon.png" />

在要缩放的图像上有一个ID很重要，并且“关闭”按钮需要是一个具有href="#"属性的链接，我将在稍后的文章中解释其原因。

2.添加CSS

最初， 不应显示 “关闭”图标。 position ， margin- ， left和bottom属性将 Expand和Close图标放置在我们希望它们位于图像右上角的位置。

pointer-events: none; 规则允许鼠标事件通过展开图标 到达图片 。

.img {
  height: 150px;
  width: 200px;
}
.close {
  background-image: url("Close-icon.png");
  background-repeat: no-repeat;
  bottom: 418px;
  display: none;
  height: 32px;
  left: 462px;
  margin-top: -32px;
  position: relative;
  width: 32px;
}
.expand {
  bottom: 125px;
  margin-left: -32px;
  margin-right: 16px;
  pointer-events: none;
  position: relative;
}

初始状态带有可见的“展开”和隐藏的“关闭”图标

3.添加图像图

在图像地图上， 可单击区域应在图像的右上角，在“展开”图标的正下方，并应具有其大小。 将<map>元素放在HTML中的第一个<img>标记之前。 下一步，我们将图像绑定到地图。

<map name="m1">
  <area shape="rect" coords="170 5 195 30" href="#img1">
</map>

在上面的代码块中， <area>标记定义图像映射内可链接区域的形状，大小和URI 。 对于矩形 ， shape属性采用rect值，而coords属性的四个值代表以下像素之间的距离：

1. 图片的左边缘和链接区域的左边缘
2. 图片的顶部边缘和链接区域的顶部边缘
3. 图片的左边缘和链接区域的右边缘
4. 图片的顶部边缘和链接区域的底部边缘

4.将图像绑定到图像图

将usemap属性添加到图像，以便将其绑定到图像映射 。 它的值必须是我们在步骤3中添加的<map>标记的name属性的哈希表示 。

<img id="img1" class="img" usemap="#m1"
    src="http://bit.ly/2acrH5J" />

现在，图像映射的可单击区域位于“扩展”按钮的后面 。 当用户单击“扩展”按钮时，实际上是可单击区域–请记住，我们通过pointer-events: none;使“扩展”按钮“可通过” pointer-events: none; 步骤2中的规则。

这样，用户可以通过单击图像本身来定位图像 ，并且在单击之后，URI的后缀为"#img1" 片段标识符 。

5.设置

在"#img1"片段标识符位于URI的末尾之前，可以使用 :target 伪类为 :target图像设置样式。

目标图像的尺寸增加，显示“关闭”按钮，并隐藏“扩展”按钮。

.img:target {
    height: 450px;
    width: 500px;
}
.img:target+.close {
    display: block;
}
.img:target+.close+.expand {
    display: none;
}

带有“关闭”按钮的缩放图像

关闭按钮的工作方式

由于将“关闭”按钮添加为背景图像（第2步），并且实际上是具有href=#属性的<a>标记（第1步），因此单击它时，它将从URI末尾删除片段标识符。 因此，它也从图像中删除了:target伪类 ，并且图像返回其先前的大小 。

现在，仅CSS的单击放大效果就完成了，请查看下面的演示，或者在下一部分中阅读更多有关图像映射背后的理论。

背景信息：为什么选择

到现在href="#imgid" ，您当然已经知道，对于这种仅使用CSS的解决方案来说，最重要的事情是使用 href="#imgid" 属性来定位图像 ，也可以使用<a>标记而不是图像映射来完成此操作。

这可能是正确的，但是对于图像，使用<map>元素更合适。 更为重要的是，当您希望通过单击图像上的较大区域而不是仅单击 “展开”图标来进行缩放时， <map>为您提供了一个简单的解决方案。

<map name="m1"><area shape="default" href="#img1"></map>

shape属性的default值创建一个覆盖整个图像的矩形可链接区域 。 如果要改用<a> ，则必须对其进行编码以覆盖图像，并且出于相同的目的，可能还必须使用包装元素。

为了进一步说明该解决方案的注意事项，Internet Explorer 仅从版本11开始支持pointer-events CSS属性（我们在步骤2中使用了）。

要在此之前支持IE浏览器，您可能需要使用<a>而不是<map> ，或者通过单击图像上的任意位置来放大图像（在这种情况下，无需使用Expand图标）。

翻译自: https://www.hongkiat.com/blog/css-image-zoom-onclick/