引导滑盖

Question

你好，我发现box中有一个很好的javascript效果 link 1 link 2

但这仅适用于wordpress。

是否可以使用Bootstrap和javascript / jquery制作相同的幻灯片框？

Answer 1

这是在发布的链接上重新创建向下滑动效果的非常简单的示例。只需使用html和CSS即可轻松完成。

<div tabindex="1" class="mainbox">
  <h1>
    This is a box with hidden content
  </h1>
</div>
<div class="hidden">
  <h2>
    I am no longer hidden
  </h2>
</div>

div {
  width:500px;
  height:200px;
  background:#3c3c3c;
  color:black;
}
.mainbox {
  cursor:pointer;
  position:relative;
  z-index:1;
}
.mainbox:hover {
  outline:none;
}
.hidden {
  position:absolute;
  top:0;
  z-index:-1;
  opacity:0.75;
  -webkit-transition:top 1s;
  -moz-transition:top 1s;
}
.mainbox:hover + .hidden {
  top:200px;
  -webkit-transition:top 1s;
}

https://jsfiddle.net/tz3vjLg7/

Answer 2

尝试一下；通过这种方法，您可以将主容器移动到所需的任何位置，在main-container上添加边距，填充等，而无需在内部重新放置滑动面板

.main-container {
  position: relative;
  margin-left: 50px;
}

.main-panel {
  position: absolute;
  width: 250px;
  height: 150px;
  background-color: lightgrey;
  z-index: 1
}

.slide-panel {
  position: absolute;
  width: 250px;
  height: 150px;
  background-color: blue;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.main-container:hover .slide-panel {
  opacity: 1;
  transform: translateY(150px)
}

<div class="main-container">
  <div class="main-panel"></div>
  <div class="slide-panel">Slide Panel</div>
</div>