Question

对于幻灯片网站，我必须显示不同大小的图像，可能是300 * 250到1200 * 1800。我知道图像映射，但它们具有固定的尺寸要求，即需要通过坐标来定义特定区域，如coords =“0,0,82,126”）。我有两个问题： 1）是否有办法使其变量，例如10％的左侧图像区域应链接到前一图像，10％的右侧图像区域应链接到下一图像。例如，如果图像尺寸为300 * 300像素，那么左边30px（水平条区域）和右边30像素应该是可点击区域 2）是否有CSS方式在上述区域显示左右箭头，就像我们在浏览Facebook相册时通常看到的那样。唯一的区别是这些左箭头和右箭头实际上应该以透明的形式显示在图像上的左右可点击区域的顶部，与图像的箭头图像宽度重叠。

感谢任何帮助。

Answer 1

这可能会让你开始。

html {
  font-size: 10px;
}
.wrapper {
  width: 1%;
  display: table;
}
#images {
  position: relative;
}
#left, #right {
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  opacity: 0.8;
  background-color: lightgray;
}
#left {
  left:0;
}
#right {
  right:0;
}
.arrow {
position: absolute;
top: 50%;
width: 2rem;
height: 2rem;
background: transparent;
border-top: .4rem solid white;
border-right: .4rem solid white;
box-shadow: 0 0 0 lightgray;
transition: all 200ms ease;
}
.arrow.left {
  left: 40%;
  transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.arrow.right {
  right: 40%;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
.arrow:hover {
  border-top: .4rem solid white;
  border-right: .4rem solid white;
  box-shadow: .2rem -.2rem 0 white;
}
.arrow:hover.left {
  left: 10px;
}
.arrow:hover.right {
  right: 10px;
}

<html>
</body>
</html>
<body>
  <div class="wrapper">
    <div id="images">
      <img src="http://i.istockimg.com/file_thumbview_approve/39758696/6/stock-photo-39758696-man-on-top-of-skyscraper.jpg">
    
      <div id="left"><a href="#" class="arrow left"></a></div>
      <div id="right"><a href="#" class="arrow right"></a></div>
    </div>
  </div>
</body>
</html>

具有不同图像尺寸的可点击图像区域

1 个答案: