Question

我有三个DIV与CSS＆＃34;剪辑路径＆＃34;属性，包括低多边形形状和基于文本的标题。

我希望在这些DIV之间创建不同的导航（如基本滑块），而标题随着简单的动画（淡入和淡出等）变化，同时形状会相互转换。

形状将是静态图层，在触发导航时会改变位置。但是标题是动态变化的层，每个DIV都有不同的层。

我首先通过分配＆＃34; hover＆＃34;以非常简单的方式完成了这项工作。向DIV陈述，但由于我不了解JS，我只能用＆＃34;切换＆＃34;，正如您在示例中看到的那样。

但我希望它可以使用触发器，例如＆＃34;点击＆＃34;，＆＃34;鼠标滚轮＆＃34;和箭头键。

关于CSS的动画，转换和其他类似的东西不是问题，我只需要学习如何在DIV之间创建这个导航系统。

＆＃13;

 $('.toggle').click(function(e) {
   e.preventDefault();
   $('.container').toggleClass('moved');
 })

＆＃13;

.container {
  background: #ccc;
  margin: 2em auto;
  width: 90%;
  height: 0;
  padding-top: 60%;
  position: relative;
}
.poly {
  background: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all .75s ease-in-out;
}
.poly:first-child {
  clip-path: polygon(45% 25%, 40% 70%, 75% 30%);
}
.moved .poly:first-child {
  clip-path: polygon(35% 50%, 55% 65%, 90% 45%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button class="toggle">Move It</button>
<div class="container">
  <div class="poly"></div>
</div>

＆＃13;

这是Jsfiddle文件https://jsfiddle.net/Lsuw3L9z/

使用触发器在DIV之间导航

0 个答案: