jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

beautify html

Browse source
This commit is contained in:
Ilya Kantor 2015-03-09 19:02:13 +03:00
parent ecf1478e7e
commit 5342f628da
354 changed files with 13965 additions and 9486 deletions
Download patch file Download diff file Expand all files Collapse all files

39
5-animation/2-css-transitions/1-animate-logo-css/solution.view/index.html
View file

@ -1,42 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>img { cursor: pointer; }</style>
<style>
img {
cursor: pointer;
}
</style>
<style>
#flyjet {
width: 40px;
height: 24px;
transition: all 3s;
}
#flyjet.growing {
width: 400px;
height: 240px;
}
</style>
</head>
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
<script>
flyjet.onclick = function() {
var ended = false;
var ended = false;
flyjet.addEventListener('transitionend', function() {
if (!ended) {
ended = true;
alert('Готово!');
flyjet.addEventListener('transitionend', function() {
if (!ended) {
ended = true;
alert('Готово!');
}
});
flyjet.classList.add('growing');
}
});
flyjet.classList.add('growing');
}
</script>
</script>
</body>
</html>
</html>

19
5-animation/2-css-transitions/1-animate-logo-css/source.view/index.html
View file

@ -1,20 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>img { cursor: pointer; }</style>
<style>
img {
cursor: pointer;
}
</style>
<style>
#flyjet {
width: 40px; /* -> 400px */
height: 24px; /* -> 240px */
width: 40px;
/* -> 400px */
height: 24px;
/* -> 240px */
}
</style>
</head>
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
</body>
</html>

26
5-animation/2-css-transitions/2-animate-logo-bezier-css/solution.view/index.html
View file

@ -1,32 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>img { display: block; cursor: pointer; }</style>
<style>
img {
display: block;
cursor: pointer;
}
</style>
<style>
#flyjet {
width: 40px;
height: 24px;
transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
}
#flyjet.growing {
width: 400px;
height: 240px;
}
</style>
</head>
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
flyjet.classList.add('growing');
}
</script>
<script>
flyjet.onclick = function() {
flyjet.classList.add('growing');
}
</script>
</body>
</html>
</html>

51
5-animation/2-css-transitions/boat.view/index.html
View file

@ -1,40 +1,43 @@
<!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">
<img src="https://js.cx/clipart/boat.png" id="boat">
<script>
boat.onclick = function() {
<script>
boat.onclick = function() {
this.onclick = null; // только первый клик сработает
this.onclick = null; // только первый клик сработает
var times = 1;
var 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';
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();
});
}
}
go();
boat.addEventListener('transitionend', function() {
times++;
go();
});
}
</script>
</script>
</body>
</html>
</html>

7
5-animation/2-css-transitions/digits-negative-delay.view/index.html
View file

@ -1,13 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<div id="digit"><span id="stripe">0123456789</span></div>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>

7
5-animation/2-css-transitions/digits.view/index.html
View file

@ -1,13 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<div id="digit"><span id="stripe">0123456789</span></div>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>

17
5-animation/2-css-transitions/step-end.view/index.html
View file

@ -1,19 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<div id="digit"><span id="stripe">0123456789</span></div>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
</body>
</html>
</html>

17
5-animation/2-css-transitions/step.view/index.html
View file

@ -1,19 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="digit"><span id="stripe">0123456789</span></div>
<div id="digit"><span id="stripe">0123456789</span></div>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
<script>
digit.onclick = function() {
stripe.classList.add('animate');
}
</script>
</body>
</html>
</html>

7
5-animation/2-css-transitions/train-linear.view/index.html
View file

@ -1,12 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
</body>
</html>

7
5-animation/2-css-transitions/train-over.view/index.html
View file

@ -1,12 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='400px'">
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='400px'">
</body>
</html>

7
5-animation/2-css-transitions/train.view/index.html
View file

@ -1,12 +1,15 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
<img class="train" src="https://js.cx/clipart/train.gif" onclick="this.style.left='450px'">
</body>
</html>