代码之家 › 专栏 › 技术社区 › Souvik Ray

如何在javascript中点击时翻转图像?

css html jquery javascript

Souvik Ray · 技术社区 · 5 年前

我有一个在悬停时翻转的图像。这是我下面的代码。代码取自w3schools。

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">

      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

注:

请运行代码段并全屏查看。
在这里粘贴代码时,在悬停时图像会翻转,但是

在w3schools中运行良好。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card

如您所见,图像在悬停时翻转得很好。但我需要翻转图像只有当我点击它。

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

现在我在网上查找了一些解决方案,并做了以下更改。

 .flip-card.hover .flip-card-inner {
      transform: rotateY(180deg);
  }

在javascript(在本例中是jquery)中,这就是我如何确保翻转

$('.flip-card').click(function() {
    $(this).toggleClass('hover');
});

但当那时候,翻转不会发生在点击。我做错什么了?

3 回复 | 直到 5 年前

Nick Van Loocke 5 年前

您必须确定何时可以调用click函数。

只需添加

$(document).ready(function() {  

  $('.flip-card').click(function() {
    $(this).toggleClass('hover');
  });

});

在本例中,这是在加载DOM时发生的。

参见示例: https://jsfiddle.net/f5yn063s/

仅供参考:也不要忘记将:hover改为。hover

Kamuran Sönecek 5 年前

也许你应该在 ready 方法。

JS公司:

$(document).ready(function(){
    $('.flip-card').click(function(){
    $(this).toggleClass('hover');
  })
});

请检查js小提琴: https://jsfiddle.net/4yt7Lozc/2/

Pedram Neo M Hacker 5 年前

添加 class 用于ex .fliped .flip-card:hover .flip-card-inner 并移除 hover toggleClass() 将该类添加/删除到元素中,以及 find() rotateY .翻转 上课时间 .flip-card-inner 不 .flip-card

$('.flip-card').click(function() {
  $(this).find('.flip-card-inner').toggleClass('fliped')
});

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/*.flip-card:hover .flip-card-inner,*/
.fliped {
  transform: rotateY(180deg)!important;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">

      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

如果要将类添加到 .翻转 ,您可以尝试下面的示例:

$('.flip-card').click(function() {
  $(this).toggleClass('hover')
});

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}


/*.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg)!important;
}*/

.flip-card.hover .flip-card-inner {
  transform: rotateY(180deg)!important;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<<link rel=“样式表”href=“https://cdnjs.cloudflare.com/ajax/libs/font awesome/4.7.0/css/font awesome.min.css”>
<h3>将鼠标悬停在下面的图像上:</h3>

<div class=“flip card”>
<div class=“flip card inner”>
<div class=“flip card front”>

<img src=“https://www.w3schools.com/howto/img_avatar.png”alt=“avatar”style=“width:300px;height:300px;”gt;
</分区>
<h1>无名氏<h1>
<p>建筑师和工程师;
<p>我们爱他<p>
</分区>