Question

export JAVA_HOME=$JAVA8_HOME
$NEO4J_HOME/bin/neo4j start

所以这是描述网页上图像的代码，但是我需要帮助来解决如何以某种方式将sidbar切换为在图像点击时滑动...是否可能？感谢。

Answer 1

您可以使用jQuery以最简单的方式执行此操作，只需使用一些新样式切换类。

$(document).ready(function() {

  $('img').click(function() {
    $('.sidebar').toggleClass("visible");
  });
});

https://jsfiddle.net/Kiboki/zh096gf1/22/

Answer 2

使用

可以实现幻灯片中的幻灯片

jQuery解决方案

我们通过首先从屏幕left初始化对象宽度的-400px位置然后将鼠标悬停在img上来创建此动画，img将为left值设置动画到0px

$(".gallery a img").on('mouseover', function() {
  $('.desc').animate({
    left: 0
  })
}).on('mouseout', function() {
  $('.desc').animate({
    left: -400
  })
})

div.gallery {
  border: 1px solid transparent;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  margin: auto;
  display: block;
  width: 400px;
  height: 400px;
}

div.desc {
  padding: 15px;
  text-align: center;
  width: 400px;
  left: -400px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <a target="_blank" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS" alt="pretty pretty">
  </a>
</div>
<div class="desc">ulzzang </div>

也可以使用非jquery解决方案

img = document.querySelector(".gallery a img")

img.onmouseover = function() {
  slide = document.querySelector(".desc.slide");
  if (!slide.classList.contains('in')) {
    slide.classList.remove('out');
    slide.classList.add('in');
  }
}

img.onmouseout = function() {
  slide = document.querySelector(".desc.slide");
  if (!slide.classList.contains('out')) {
    slide.classList.remove('in');
    slide.classList.add('out');
  }
}

div.gallery {
  border: 1px solid transparent;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  margin: auto;
  display: block;
  width: 400px;
}

div.desc {
  padding: 15px;
  text-align: center;
  width: 400px;
  left: -400px;
  position: absolute;
}

.slide {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.slide.out {
  left: -400px;
}

.slide.in {
  left: 0;
}

<div class="gallery">
  <a target="_blank" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc7oy-B5WhIG-bmcOfNIKJFw310bemj9E1K9CA7dfgXJuyvfsS" alt="pretty pretty">
  </a>
</div>
<div class="desc slide out">ulzzang </div>

如何通过单击图像来切换侧栏？

2 个答案: