43 lines
749 B
HTML
43 lines
749 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<img src="https://js.cx/clipart/boat.png" id="boat">
|
|
|
|
<script>
|
|
boat.onclick = function() {
|
|
|
|
this.onclick = null; // only the first click should start the animation
|
|
|
|
let times = 1;
|
|
|
|
function go() {
|
|
if (times % 2) {
|
|
boat.classList.remove('back');
|
|
boat.style.marginLeft = 100 * times + 200 + 'px';
|
|
} else {
|
|
boat.classList.add('back');
|
|
boat.style.marginLeft = 100 * times - 200 + 'px';
|
|
}
|
|
|
|
}
|
|
|
|
go();
|
|
|
|
boat.addEventListener('transitionend', function() {
|
|
times++;
|
|
go();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|