即时尝试转换div而不是显示另一个div我使用了javascript并且它可以工作但我想将它应用于超过1组div,所以我想使用类而不是id' s。
var init = function() {
var card = document.getElementById('card');
document.getElementById('flip').addEventListener( 'click', function() {
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
var init = function() {
var card = document.getElementById('card');
document.getElementById('flipback').addEventListener( 'click', function() {
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);

<section class="container">
<div id="card">
<figure class="front" id="flip"></figure>
<figure class="back" id="flipback">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
</div>
</section>
&#13;
答案 0 :(得分:1)
<强> HTML 强>
$(".flip").hover(function() {
$(this).find(".card").toggleClass("flipped");
return false;
});
<强>的jQuery 强>
.flip {
-webkit-perspective: 800;
-ms-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
width: 240px;
height: 310px;
position: relative;
margin: 0px auto;
}
.flip .card.flipped {
transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
/* IE 9 */
-moz-transform: rotatey(-180deg);
/* Firefox */
-webkit-transform: rotatey(-180deg);
/* Safari and Chrome */
-o-transform: rotatey(-180deg);
/* Opera */
}
.flip .card {
width: 200px;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
width: 200px;
height: 100%;
position: absolute;
text-align: center;
backface-visibility: hidden;
/* W3C */
-webkit-backface-visibility: hidden;
/* Safari & Chrome */
-moz-backface-visibility: hidden;
/* Firefox */
-ms-backface-visibility: hidden;
/* Internet Explorer */
-o-backface-visibility: hidden;
/* Opera */
}
.flip .card .front {
position: absolute;
background: white;
}
.flip .card .back {
background: white;
transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
/* IE 9 */
-moz-transform: rotatey(-180deg);
/* Firefox */
-webkit-transform: rotatey(-180deg);
/* Safari and Chrome */
-o-transform: rotatey(-180deg);
/* Opera */
}
<强> CSS 强>
var allAbove = (from item in userQuery
where (item.Id!= myData.Id &&
item.TotalPoints > myData.TotalPoints ||
(item.TotalPoints == myData.TotalPoints &&
item.CorrectTrends >= myData.CorrectTrends)));
https://jsfiddle.net/oxn1ccd9/
这肯定有用。快乐编码:)
答案 1 :(得分:0)
$(function() {
$('.flip').click(function(e) {
e.preventDefault();
$(this).closest('.card').toggleClass('flipped');
});
});
.front, .back {
transition: transform 0.25s linear;
backface-visibility: hidden;
position: absolute;
color: #000;
top: 0;
left: 0;
}
.front {
background: #0f0;
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background: #f00;
}
.flipped .front {
transform: rotateY(180deg);
}
.flipped .back {
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container">
<div class="card">
<figure class="flip front">Lorem ipsum dolor sit amet</figure>
<figure class="flip back">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
</div>
</section>