<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h1>Wombat Revealer</h1>
<div class="item one">
<div class=‘cover‘>
<span>Reveal Wombat!</span>
</div>
<img src="https://c2.staticflickr.com/6/5290/5262975644_bc61d8702d_b.jpg" width=320 />
</div>
<div class="item two">
<div class=‘cover‘>
<span>Reveal Wombat!</span>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Common_Wombat_(Vombatus_ursinus_tasmaniensis).jpg" width=320 />
</div>
<div class="item three">
<div class=‘cover‘>
<span>Reveal Wombat!</span>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/1024px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" width=320 />
</div>
</body>
</html>
.item .cover {
width: 320px;
height: 213px;
background-color: yellow;
position: absolute;
transition: opacity 500ms 200ms,
transform 500ms;
}
.item .cover.open {
opacity: 0;
transform: rotate(180deg);
}
jQuery(‘.cover‘).click(function(e) {
var target = jQuery(e.currentTarget);
target.toggleClass(‘open‘);
});
时间： 2024-10-21 10:55:33