Question

我希望将.container和.box缩放进出我点击的内容。我遇到的问题是当我进出时，它会从第一个.box div进出，而不是我点击的那个。

每个.box都会包含它自己独特的内容，所以当在“画板”视图（放大）中查看时，我希望人们能够看到该特定.box中包含的内容。当人们点击其中一个框时，我希望它缩放回（1）以覆盖视口。如果此人在第4个.box上并点击“缩小”，我希望它从该特定的.box缩小。

每个框都是视口的大小，这就是它现在的设置方式。

有没有人只有CSS的解决方案？或者这是在JS中可以更好地完成的事情？我不是JS专家，我只是进入它，所以我很好奇我是否可以在一些简单的JS中做些什么。

请参阅我的代码：

http://codepen.io/jareko999/pen/eZGLZB

HTML

<div class="bar">
  <button class="zoomout" onclick="zoomOut()">Zoom Out</button> 
</div>

<div class="container">
  <div class="artboard">  
    <div class="box">
      <i class="fa fa-diamond"></i>
    </div>
    <div class="box">
      <i class="fa fa-bolt"></i>
    </div>
    <div class="box">
      <i class="fa fa-flag"></i>
    </div>
    <div class="box">
      <i class="fa fa-flask"></i>
    </div>
  </div> 
</div>

CSS

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  background: #e1e1e1;
  overflow-y: hidden;
}

.bar {
  position: fixed;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: white;
  padding: 14px 0;
  z-index: 1;
}

.zoomout {
  -webkit-appearance: none;
  border: none;
  outline: 0;
  width: 100px;
  height: 40px;
  margin: auto;
  background: black;
  color: white;
  border-radius: 10px;
  cursor: pointer;
}

.container {
  height: 100vh;
  width: 100%;
  transition: .2s ease-out;
  transform: scale(1);
}

.container-small {
  height: 100vh;
  width: 100%;
  transition: .2s ease-out;
  transform: scale(.7);
}

.artboard {
  height: 100%;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  background: #e1e1e1;
}

.box {
  padding-top: 44vh;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px #a9a9a9;
  background: linear-gradient(to right, #276cd6 , #00a651);
  transition: .2s ease-out;
  transform: scale(1);
}

.box-small {
  padding-top: 44vh;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px #a9a9a9;
  background: linear-gradient(to right, #276cd6 , #00a651);
  transition: .2s ease-out;
  transform: scale(.9);
  cursor: pointer;
}

.box i {
  color: #e1e1e1;
  font-size: 3em;
}

.overflow {
  overflow: hidden;
}

.remove {
  display: none;
}

::-webkit-scrollbar {
  width: 12px;
  height: 4px;
}

/* Track */

::-webkit-scrollbar-track {
    background: white;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background: #4099ff; 
}

JS

$(document).ready(function() {
   $('.container').addClass('overflow');
});

function zoomOut() {
  $('.bar').addClass('remove');
  $('.box').addClass('box-small');
  $('.container').removeClass('overflow');
  $('.container').addClass('container-small');
}

$('.box').click(function() {
  $('.bar').removeClass('remove');
  $('.box').removeClass('box-small');
  $('.container').addClass('overflow');
  $('.container').removeClass('container-small');

});

Answer 1

您尝试实现的目标可以使用仅CSS方法完成。此方法依赖于使用位置哈希（url.com＃foobar）和:target伪选择器。

:target伪选择器允许您定位id与位置哈希匹配的元素。例如，假设您有一个ID为“foobar”的元素，#foobar:target选择器仅在您导航到url.com#foobar时才适用。您可以创建一个指向#foobar的href属性的链接，以使按钮触发此伪选择器。

在您的情况下，您可以在匹配#container位置哈希时应用缩小样式，并仅显示与位置哈希匹配的幻灯片。

此方法的缺点是您必须添加ID，并添加实际触发:target伪类的链接。

我的解释可能不太清楚，所以我提出了这个演示： http://codepen.io/ntim/pen/ONxGJd

使用CSS变换比例的画板样式布局

1 个答案: