beautify html
This commit is contained in:
Ilya Kantor
parent
ecf1478e7e
commit
5342f628da
354 changed files with 13965 additions and 9486 deletions
|
|
@ -1,98 +1,100 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.selected {
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Клик на элементе выделяет только его.<br>
|
||||
Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.<br>
|
||||
Shift+Клик добавляет промежуток от последнего кликнутого к выделению.<br>
|
||||
Клик на элементе выделяет только его.
|
||||
<br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
|
||||
<br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
|
||||
<br>
|
||||
|
||||
<ul>
|
||||
<li>Кристофер Робин</li>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Мудрая Сова</li>
|
||||
<li>Кролик. Просто кролик.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Кристофер Робин</li>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Мудрая Сова</li>
|
||||
<li>Кролик. Просто кролик.</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var ul = document.querySelector('ul');
|
||||
|
||||
var ul = document.querySelector('ul');
|
||||
var lastClickedLi = null;
|
||||
|
||||
var lastClickedLi = null;
|
||||
// --- обработчики ---
|
||||
|
||||
// --- обработчики ---
|
||||
ul.onclick = function(event) {
|
||||
var target = event.target;
|
||||
|
||||
ul.onclick = function(event) {
|
||||
var target = event.target;
|
||||
// возможно, клик был внутри списка UL, но вне элементов LI
|
||||
if (target.tagName != "LI") return;
|
||||
|
||||
// возможно, клик был внутри списка UL, но вне элементов LI
|
||||
if (target.tagName != "LI") return;
|
||||
// для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
|
||||
if (event.metaKey || event.ctrlKey) {
|
||||
toggleSelect(target);
|
||||
} else if (event.shiftKey) {
|
||||
selectFromLast(target);
|
||||
} else {
|
||||
selectSingle(target);
|
||||
}
|
||||
|
||||
// для Mac проверяем Cmd, т.к. Ctrl + click там контекстное меню
|
||||
if(event.metaKey || event.ctrlKey) {
|
||||
toggleSelect(target);
|
||||
} else if (event.shiftKey) {
|
||||
selectFromLast(target);
|
||||
} else {
|
||||
selectSingle(target);
|
||||
}
|
||||
lastClickedLi = target;
|
||||
}
|
||||
|
||||
lastClickedLi = target;
|
||||
}
|
||||
ul.onmousedown = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
ul.onmousedown = function() {
|
||||
return false;
|
||||
};
|
||||
// --- функции для выделения ---
|
||||
|
||||
// --- функции для выделения ---
|
||||
function toggleSelect(li) {
|
||||
li.classList.toggle('selected');
|
||||
}
|
||||
|
||||
function toggleSelect(li) {
|
||||
li.classList.toggle('selected');
|
||||
}
|
||||
function selectFromLast(target) {
|
||||
var startElem = lastClickedLi || ul.children[0];
|
||||
|
||||
function selectFromLast(target) {
|
||||
var startElem = lastClickedLi || ul.children[0];
|
||||
var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
|
||||
|
||||
var isLastClickedBefore = startElem.compareDocumentPosition(target) & 4;
|
||||
|
||||
if (isLastClickedBefore) {
|
||||
for(var elem = startElem; elem != target; elem = elem.nextElementSibling) {
|
||||
if (isLastClickedBefore) {
|
||||
for (var elem = startElem; elem != target; elem = elem.nextElementSibling) {
|
||||
elem.classList.add('selected');
|
||||
}
|
||||
} else {
|
||||
for (var elem = startElem; elem != target; elem = elem.previousElementSibling) {
|
||||
elem.classList.add('selected');
|
||||
}
|
||||
}
|
||||
elem.classList.add('selected');
|
||||
}
|
||||
} else {
|
||||
for(var elem = startElem; elem != target; elem = elem.previousElementSibling) {
|
||||
elem.classList.add('selected');
|
||||
|
||||
|
||||
|
||||
|
||||
function deselectAll() {
|
||||
for (var i = 0; i < ul.children.length; i++) {
|
||||
ul.children[i].classList.remove('selected');
|
||||
}
|
||||
}
|
||||
}
|
||||
elem.classList.add('selected');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function deselectAll() {
|
||||
for(var i=0; i<ul.children.length; i++) {
|
||||
ul.children[i].classList.remove('selected');
|
||||
}
|
||||
}
|
||||
|
||||
function selectSingle(li) {
|
||||
deselectAll();
|
||||
li.classList.add('selected');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
function selectSingle(li) {
|
||||
deselectAll();
|
||||
li.classList.add('selected');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,38 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.selected {
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Клик на элементе выделяет только его.<br>
|
||||
Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.<br>
|
||||
Shift+Клик добавляет промежуток от последнего кликнутого к выделению.<br>
|
||||
Клик на элементе выделяет только его.
|
||||
<br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
|
||||
<br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
|
||||
<br>
|
||||
|
||||
<ul>
|
||||
<li>Кристофер Робин</li>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Мудрая Сова</li>
|
||||
<li>Кролик. Просто кролик.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Кристофер Робин</li>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Мудрая Сова</li>
|
||||
<li>Кролик. Просто кролик.</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
// ... ваш код
|
||||
</script>
|
||||
<script>
|
||||
// ... ваш код
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,92 +1,94 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.tree li {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.tree li {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="tree" id="tree">
|
||||
<ul class="tree" id="tree">
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
<ul>
|
||||
<li>Коровы</li>
|
||||
<li>Ослы</li>
|
||||
<li>Собаки</li>
|
||||
<li>Тигры</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Другие
|
||||
<ul>
|
||||
<li>Змеи</li>
|
||||
<li>Птицы</li>
|
||||
<li>Ящерицы</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
<ul>
|
||||
<li>Коровы</li>
|
||||
<li>Ослы</li>
|
||||
<li>Собаки</li>
|
||||
<li>Тигры</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Другие
|
||||
<ul>
|
||||
<li>Змеи</li>
|
||||
<li>Птицы</li>
|
||||
<li>Ящерицы</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Рыбы
|
||||
<ul>
|
||||
<li>Аквариумные
|
||||
<ul>
|
||||
<li>Гуппи</li>
|
||||
<li>Скалярии</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Аквариумные
|
||||
<ul>
|
||||
<li>Гуппи</li>
|
||||
<li>Скалярии</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li>Морские
|
||||
<ul>
|
||||
<li>Морская форель</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Морские
|
||||
<ul>
|
||||
<li>Морская форель</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var tree = document.getElementById('tree');
|
||||
<script>
|
||||
var tree = document.getElementById('tree');
|
||||
|
||||
/* проверить на попадание события в заголовок LI */
|
||||
function isOverTitle(evt, li) {
|
||||
/* обернуть заголовок в span */
|
||||
var titleWrapper = document.createElement('span');
|
||||
var titleTextNode = li.firstChild; // <li>TITLE...
|
||||
li.insertBefore(titleWrapper, titleTextNode); // <li><span></span>TITLE
|
||||
titleWrapper.appendChild(titleTextNode); // <li><span>TITLE</span>
|
||||
/* проверить на попадание события в заголовок LI */
|
||||
function isOverTitle(evt, li) {
|
||||
/* обернуть заголовок в span */
|
||||
var titleWrapper = document.createElement('span');
|
||||
var titleTextNode = li.firstChild; // <li>TITLE...
|
||||
li.insertBefore(titleWrapper, titleTextNode); // <li><span></span>TITLE
|
||||
titleWrapper.appendChild(titleTextNode); // <li><span>TITLE</span>
|
||||
|
||||
/* определить, был ли клик по координатам - в SPAN ?*/
|
||||
var isClickOnTitle = (document.elementFromPoint(evt.clientX, evt.clientY) == titleWrapper);
|
||||
/* определить, был ли клик по координатам - в SPAN ?*/
|
||||
var isClickOnTitle = (document.elementFromPoint(evt.clientX, evt.clientY) == titleWrapper);
|
||||
|
||||
/* в любом случае вернуть заголовок в текст обратно перед тем как идти дальше */
|
||||
titleWrapper.removeChild(titleWrapper.firstChild); // <li><span></span>
|
||||
li.replaceChild(titleTextNode, titleWrapper); // <li>TITLE...
|
||||
/* в любом случае вернуть заголовок в текст обратно перед тем как идти дальше */
|
||||
titleWrapper.removeChild(titleWrapper.firstChild); // <li><span></span>
|
||||
li.replaceChild(titleTextNode, titleWrapper); // <li>TITLE...
|
||||
|
||||
return isClickOnTitle;
|
||||
}
|
||||
return isClickOnTitle;
|
||||
}
|
||||
|
||||
/* отслеживаем клики на всём дереве */
|
||||
tree.onclick = function(evt) {
|
||||
var evt = evt || event;
|
||||
var target = evt.target || evt.srcElement;
|
||||
/* отслеживаем клики на всём дереве */
|
||||
tree.onclick = function(evt) {
|
||||
var evt = evt || event;
|
||||
var target = evt.target || evt.srcElement;
|
||||
|
||||
|
||||
if (!isOverTitle(evt, target)) {
|
||||
return; // клик не на заголовке
|
||||
}
|
||||
if (!isOverTitle(evt, target)) {
|
||||
return; // клик не на заголовке
|
||||
}
|
||||
|
||||
/* раскрыть-закрыть детей */
|
||||
var node = target.getElementsByTagName('ul')[0];
|
||||
if (!node) return; // нет детей
|
||||
/* раскрыть-закрыть детей */
|
||||
var node = target.getElementsByTagName('ul')[0];
|
||||
if (!node) return; // нет детей
|
||||
|
||||
node.style.display = node.style.display ? '' : 'none';
|
||||
}
|
||||
|
||||
</script>
|
||||
node.style.display = node.style.display ? '' : 'none';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,68 +1,70 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.tree li {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.tree li {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="tree" id="tree">
|
||||
<ul class="tree" id="tree">
|
||||
<li>Животные
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
<ul>
|
||||
<li>Коровы</li>
|
||||
<li>Ослы</li>
|
||||
<li>Собаки</li>
|
||||
<li>Тигры</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Другие
|
||||
<ul>
|
||||
<li>Змеи</li>
|
||||
<li>Птицы</li>
|
||||
<li>Ящерицы</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Млекопитающие
|
||||
<ul>
|
||||
<li>Коровы</li>
|
||||
<li>Ослы</li>
|
||||
<li>Собаки</li>
|
||||
<li>Тигры</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Другие
|
||||
<ul>
|
||||
<li>Змеи</li>
|
||||
<li>Птицы</li>
|
||||
<li>Ящерицы</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Рыбы
|
||||
<ul>
|
||||
<li>Аквариумные
|
||||
<ul>
|
||||
<li>Гуппи</li>
|
||||
<li>Скалярии</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Аквариумные
|
||||
<ul>
|
||||
<li>Гуппи</li>
|
||||
<li>Скалярии</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li>Морские
|
||||
<ul>
|
||||
<li>Морская форель</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Морские
|
||||
<ul>
|
||||
<li>Морская форель</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var tree = document.getElementById('tree');
|
||||
<script>
|
||||
var tree = document.getElementById('tree');
|
||||
|
||||
tree.onclick = function(evt) {
|
||||
var evt = evt || event;
|
||||
var target = evt.target || evt.srcElement;
|
||||
tree.onclick = function(evt) {
|
||||
var evt = evt || event;
|
||||
var target = evt.target || evt.srcElement;
|
||||
|
||||
/* раскрыть-закрыть детей */
|
||||
var node = target.getElementsByTagName('ul')[0];
|
||||
if (!node) return; // нет детей
|
||||
/* раскрыть-закрыть детей */
|
||||
var node = target.getElementsByTagName('ul')[0];
|
||||
if (!node) return; // нет детей
|
||||
|
||||
node.style.display = node.style.display ? '' : 'none';
|
||||
}
|
||||
|
||||
</script>
|
||||
node.style.display = node.style.display ? '' : 'none';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,19 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
function setHandler() {
|
||||
window.onbeforeunload = function() {
|
||||
return "Данные не сохранены. Точно перейти?";
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function setHandler() {
|
||||
window.onbeforeunload = function() {
|
||||
return "Данные не сохранены. Точно перейти?";
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick="setHandler()">Поставить window.onbeforeunload</button>
|
||||
<button onclick="setHandler()">Поставить window.onbeforeunload</button>
|
||||
|
||||
<a href="http://example.com">Уйти на EXAMPLE.COM</a>
|
||||
<a href="http://example.com">Уйти на EXAMPLE.COM</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,42 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style> .img-replace { float: left; border: 1px solid black;} </style>
|
||||
<style>
|
||||
.img-replace {
|
||||
float: left;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<button onclick="window.location.reload(true)">Перезагрузить ифрейм</button>
|
||||
<hr>
|
||||
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="https://js.cx/search/google.png" class="img-replace">
|
||||
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
|
||||
</div>
|
||||
<button onclick="window.location.reload(true)">Перезагрузить ифрейм</button>
|
||||
<hr>
|
||||
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="https://js.cx/search/google.png" class="img-replace">
|
||||
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
|
||||
</div>
|
||||
|
||||
<div style="width:101px;height:40px;font-size:32px" data-src="https://js.cx/search/yandex.png" class="img-replace">
|
||||
<span style="color:#F00">Я</span>ндекс
|
||||
</div>
|
||||
<div style="width:101px;height:40px;font-size:32px" data-src="https://js.cx/search/yandex.png" class="img-replace">
|
||||
<span style="color:#F00">Я</span>ндекс
|
||||
</div>
|
||||
|
||||
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing:3px;font-family:Arial" data-src="bing.png" class="img-replace">bing</div>
|
||||
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing:3px;font-family:Arial" data-src="bing.png" class="img-replace">bing</div>
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
function replaceImg() {
|
||||
var divs = document.querySelectorAll('div.img-replace');
|
||||
for (var i = 0; i < divs.length; i++)(function(i) {
|
||||
var img = document.createElement('img');
|
||||
img.src = divs[i].getAttribute('data-src');
|
||||
img.className = 'img-replace';
|
||||
|
||||
function replaceImg() {
|
||||
var divs = document.querySelectorAll('div.img-replace');
|
||||
for(var i=0; i<divs.length; i++) (function(i) {
|
||||
var img = document.createElement('img');
|
||||
img.src = divs[i].getAttribute('data-src');
|
||||
img.className = 'img-replace';
|
||||
img.onload = function() {
|
||||
divs[i].parentNode.replaceChild(img, divs[i]);
|
||||
}
|
||||
|
||||
img.onload = function() {
|
||||
divs[i].parentNode.replaceChild(img, divs[i]);
|
||||
}(i))
|
||||
}
|
||||
|
||||
}(i))
|
||||
}
|
||||
|
||||
setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации
|
||||
</script>
|
||||
setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style> .img-replace { float: left; border: 1px solid black;} </style>
|
||||
<style>
|
||||
.img-replace {
|
||||
float: left;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Google -->
|
||||
<!-- Google -->
|
||||
|
||||
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
|
||||
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
|
||||
</div>
|
||||
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
|
||||
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
|
||||
</div>
|
||||
|
||||
<!-- Яндекс -->
|
||||
<div style="width:101px;height:40px;font-size:32px" class="img-replace">
|
||||
<span style="color:#F00">Я</span>ндекс
|
||||
</div>
|
||||
<!-- Яндекс -->
|
||||
<div style="width:101px;height:40px;font-size:32px" class="img-replace">
|
||||
<span style="color:#F00">Я</span>ндекс
|
||||
</div>
|
||||
|
||||
<!-- Bing -->
|
||||
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>
|
||||
<!-- Bing -->
|
||||
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>
|
||||
|
||||
<hr>
|
||||
<!-- картинки (для bing картинки специально нет, чтобы протестировать случай "загрузка не удалась") -->
|
||||
<hr>
|
||||
<!-- картинки (для bing картинки специально нет, чтобы протестировать случай "загрузка не удалась") -->
|
||||
|
||||
<img src="https://js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
|
||||
<img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
|
||||
<img src="https://js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
|
||||
<img src="https://js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
|
||||
<img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
|
||||
<img src="https://js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,56 +1,57 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
function preloadImages(sources, callback) {
|
||||
var counter = 0;
|
||||
|
||||
function preloadImages(sources, callback) {
|
||||
var counter = 0;
|
||||
function onLoad() {
|
||||
counter++;
|
||||
if (counter == sources.length) callback();
|
||||
}
|
||||
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var img = document.createElement('img');
|
||||
// сначала onload/onerror, затем src - важно для IE8-
|
||||
img.onload = img.onerror = onLoad;
|
||||
img.src = sources[i];
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
counter++;
|
||||
if (counter == sources.length) callback();
|
||||
}
|
||||
|
||||
// ---------- Проверка ----------
|
||||
|
||||
var sources = [
|
||||
"https://js.cx/images-load/1.jpg",
|
||||
"https://js.cx/images-load/2.jpg",
|
||||
"https://js.cx/images-load/3.jpg"
|
||||
];
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var img = document.createElement('img');
|
||||
// сначала onload/onerror, затем src - важно для IE8-
|
||||
img.onload = img.onerror = onLoad;
|
||||
img.src = sources[i];
|
||||
sources[i] += '?' + Math.random();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ---------- Проверка ----------
|
||||
|
||||
var sources = [
|
||||
"https://js.cx/images-load/1.jpg",
|
||||
"https://js.cx/images-load/2.jpg",
|
||||
"https://js.cx/images-load/3.jpg"
|
||||
];
|
||||
for (var i=0; i<sources.length; i++) {
|
||||
sources[i] += '?'+Math.random();
|
||||
}
|
||||
|
||||
function testLoaded() {
|
||||
var widthSum = 0;
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var img = document.createElement('img');
|
||||
img.src = sources[i];
|
||||
widthSum += img.width;
|
||||
function testLoaded() {
|
||||
var widthSum = 0;
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var img = document.createElement('img');
|
||||
img.src = sources[i];
|
||||
widthSum += img.width;
|
||||
}
|
||||
alert(widthSum); // 300!
|
||||
}
|
||||
alert(widthSum); // 300!
|
||||
}
|
||||
|
||||
// до загрузки - 0
|
||||
testLoaded();
|
||||
// после загрузки - 300
|
||||
preloadImages(sources, testLoaded);
|
||||
|
||||
</script>
|
||||
// до загрузки - 0
|
||||
testLoaded();
|
||||
// после загрузки - 300
|
||||
preloadImages(sources, testLoaded);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,49 +1,50 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
function preloadImages(sources, callback) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
// ---------- Проверка ----------
|
||||
|
||||
/* файлы для загрузки */
|
||||
var sources = [
|
||||
"https://js.cx/images-load/1.jpg",
|
||||
"https://js.cx/images-load/2.jpg",
|
||||
"https://js.cx/images-load/3.jpg"
|
||||
];
|
||||
for (var i=0; i<sources.length; i++) {
|
||||
sources[i] += '?'+Math.random(); // добавляем параметр, чтобы без кеша (для теста)
|
||||
}
|
||||
|
||||
/** если картинка загружена, то можно будет сразу получить её ширину
|
||||
* создадим все картинки и проверим, есть ли у них ширина
|
||||
*/
|
||||
function testLoaded() {
|
||||
var widthSum = 0;
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var img = document.createElement('img');
|
||||
img.src = sources[i];
|
||||
widthSum += img.width;
|
||||
<script>
|
||||
function preloadImages(sources, callback) {
|
||||
/* ваш код */
|
||||
}
|
||||
// каждое изображение 100x100, общая ширина должна быть 300px
|
||||
alert(widthSum);
|
||||
}
|
||||
|
||||
// до загрузки - выведет 0
|
||||
testLoaded();
|
||||
// ---------- Проверка ----------
|
||||
|
||||
// после загрузки - выведет 300
|
||||
preloadImages(sources, testLoaded);
|
||||
/* файлы для загрузки */
|
||||
var sources = [
|
||||
"https://js.cx/images-load/1.jpg",
|
||||
"https://js.cx/images-load/2.jpg",
|
||||
"https://js.cx/images-load/3.jpg"
|
||||
];
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
sources[i] += '?' + Math.random(); // добавляем параметр, чтобы без кеша (для теста)
|
||||
}
|
||||
|
||||
</script>
|
||||
/** если картинка загружена, то можно будет сразу получить её ширину
|
||||
* создадим все картинки и проверим, есть ли у них ширина
|
||||
*/
|
||||
function testLoaded() {
|
||||
var widthSum = 0;
|
||||
for (var i = 0; i < sources.length; i++) {
|
||||
var img = document.createElement('img');
|
||||
img.src = sources[i];
|
||||
widthSum += img.width;
|
||||
}
|
||||
// каждое изображение 100x100, общая ширина должна быть 300px
|
||||
alert(widthSum);
|
||||
}
|
||||
|
||||
// до загрузки - выведет 0
|
||||
testLoaded();
|
||||
|
||||
// после загрузки - выведет 300
|
||||
preloadImages(sources, testLoaded);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,41 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
function addScript(src, callback) {
|
||||
var script = document.createElement('script');
|
||||
script.src = src;
|
||||
var s = document.getElementsByTagName('script')[0]
|
||||
s.parentNode.insertBefore(script, s);
|
||||
|
||||
function addScript(src, callback) {
|
||||
var script = document.createElement('script');
|
||||
script.src = src;
|
||||
var s = document.getElementsByTagName('script')[0]
|
||||
s.parentNode.insertBefore(script, s);
|
||||
var loaded = false;
|
||||
|
||||
var loaded = false;
|
||||
function onload() {
|
||||
if (loaded) return; // повторный вызов
|
||||
loaded = true;
|
||||
callback();
|
||||
}
|
||||
|
||||
script.onload = onload; // все браузеры, IE с версии 9
|
||||
|
||||
script.onreadystatechange = function() { // IE8-
|
||||
if (this.readyState == 'loaded' || this.readyState == 'complete') {
|
||||
setTimeout(onload, 0);
|
||||
}
|
||||
};
|
||||
|
||||
function onload() {
|
||||
if (loaded) return; // повторный вызов
|
||||
loaded = true;
|
||||
callback();
|
||||
}
|
||||
|
||||
script.onload = onload; // все браузеры, IE с версии 9
|
||||
|
||||
script.onreadystatechange = function () { // IE8-
|
||||
if (this.readyState == 'loaded' || this.readyState == 'complete') {
|
||||
setTimeout(onload, 0);
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
addScript("go.js", function() {
|
||||
go();
|
||||
});
|
||||
|
||||
</script>
|
||||
addScript("go.js", function() {
|
||||
go();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,21 +1,22 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
function addScript(src, callback) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
function addScript(src, callback) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
addScript("go.js", function() {
|
||||
go();
|
||||
});
|
||||
|
||||
</script>
|
||||
addScript("go.js", function() {
|
||||
go();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,51 +1,54 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
function addScript(src) {
|
||||
var script = document.createElement('script');
|
||||
script.src = src;
|
||||
var s = document.getElementsByTagName('script')[0]
|
||||
s.parentNode.insertBefore(script, s);
|
||||
return script;
|
||||
}
|
||||
|
||||
function addScripts(scripts, callback) {
|
||||
var loaded = {}; // Для загруженных файлов loaded[i] = true
|
||||
var counter = 0;
|
||||
|
||||
function onload(i) {
|
||||
if (loaded[i]) return; // лишний вызов onload/onreadystatechange
|
||||
loaded[i] = true;
|
||||
counter++;
|
||||
if (counter == scripts.length) callback();
|
||||
<script>
|
||||
function addScript(src) {
|
||||
var script = document.createElement('script');
|
||||
script.src = src;
|
||||
var s = document.getElementsByTagName('script')[0]
|
||||
s.parentNode.insertBefore(script, s);
|
||||
return script;
|
||||
}
|
||||
|
||||
for (var i = 0; i < scripts.length; i++) (function(i) {
|
||||
var script = addScript(scripts[i]);
|
||||
function addScripts(scripts, callback) {
|
||||
var loaded = {}; // Для загруженных файлов loaded[i] = true
|
||||
var counter = 0;
|
||||
|
||||
script.onload = function() {
|
||||
onload(i);
|
||||
};
|
||||
function onload(i) {
|
||||
if (loaded[i]) return; // лишний вызов onload/onreadystatechange
|
||||
loaded[i] = true;
|
||||
counter++;
|
||||
if (counter == scripts.length) callback();
|
||||
}
|
||||
|
||||
script.onreadystatechange = function() { // IE8-
|
||||
if (this.readyState == 'loaded' || this.readyState == 'complete') {
|
||||
setTimeout(this.onload, 0); // возможны повторные вызовы onload
|
||||
}
|
||||
};
|
||||
for (var i = 0; i < scripts.length; i++)(function(i) {
|
||||
var script = addScript(scripts[i]);
|
||||
|
||||
}(i));
|
||||
script.onload = function() {
|
||||
onload(i);
|
||||
};
|
||||
|
||||
}
|
||||
script.onreadystatechange = function() { // IE8-
|
||||
if (this.readyState == 'loaded' || this.readyState == 'complete') {
|
||||
setTimeout(this.onload, 0); // возможны повторные вызовы onload
|
||||
}
|
||||
};
|
||||
|
||||
addScripts(["a.js", "b.js", "c.js"], function() { a() });
|
||||
}(i));
|
||||
|
||||
</script>
|
||||
}
|
||||
|
||||
addScripts(["a.js", "b.js", "c.js"], function() {
|
||||
a()
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
/* ваш код */
|
||||
|
||||
/* ваш код */
|
||||
|
||||
// функция a() сработает только если загружены a.js, b.js, c.js
|
||||
addScripts(["a.js", "b.js", "c.js"], function() { a() });
|
||||
|
||||
</script>
|
||||
// функция a() сработает только если загружены a.js, b.js, c.js
|
||||
addScripts(["a.js", "b.js", "c.js"], function() {
|
||||
a()
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,167 +1,175 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
/* подсказка должна перекрывать другие элементы */
|
||||
|
||||
padding: 10px 20px;
|
||||
/* красивости... */
|
||||
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var showingTooltip;
|
||||
|
||||
var showingTooltip;
|
||||
document.onmouseover = function(e) {
|
||||
var target = e.target;
|
||||
|
||||
document.onmouseover = function(e) {
|
||||
var target = e.target;
|
||||
// ВАЖНО: mouseover может сработать сразу на потомке
|
||||
// минуя родителя (при быстром движении мышью)
|
||||
|
||||
// ВАЖНО: mouseover может сработать сразу на потомке
|
||||
// минуя родителя (при быстром движении мышью)
|
||||
|
||||
// пройти вверх до первого элемента с data-tooltip
|
||||
while (target !== this) {
|
||||
var tooltip = target.getAttribute('data-tooltip');
|
||||
if (tooltip) break;
|
||||
target = target.parentNode;
|
||||
}
|
||||
// пройти вверх до первого элемента с data-tooltip
|
||||
while (target !== this) {
|
||||
var tooltip = target.getAttribute('data-tooltip');
|
||||
if (tooltip) break;
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if (!tooltip) return;
|
||||
if (!tooltip) return;
|
||||
|
||||
// показать и запомнить подсказку
|
||||
showingTooltip = showTooltip(tooltip, target);
|
||||
}
|
||||
|
||||
document.onmouseout = function() {
|
||||
// возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
|
||||
// но в этом случае сразу же будет и mouseover,
|
||||
// то есть подсказка будет уничтожена и тут же показана заново
|
||||
//
|
||||
// это лишние расходы, их можно избежать дополнительными проверками
|
||||
if (showingTooltip) {
|
||||
document.body.removeChild(showingTooltip);
|
||||
showingTooltip = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function showTooltip(text, elem) {
|
||||
var tooltipElem = document.createElement('div');
|
||||
tooltipElem.className = 'tooltip';
|
||||
tooltipElem.innerHTML = text;
|
||||
document.body.appendChild(tooltipElem);
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var left = coords.left + (elem.offsetWidth - tooltipElem.offsetWidth)/2;
|
||||
if (left < 0) left = 0; // не вылезать за левую границу экрана
|
||||
|
||||
// не вылезать за верхнюю границу окна
|
||||
var top = coords.top - tooltipElem.offsetHeight - 5;
|
||||
if (top < 0) {
|
||||
top = coords.top + elem.offsetHeight + 5;
|
||||
}
|
||||
|
||||
tooltipElem.style.left = left + 'px';
|
||||
tooltipElem.style.top = top + 'px';
|
||||
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getCoords(elem) {
|
||||
var box = elem.getBoundingClientRect();
|
||||
|
||||
var body = document.body;
|
||||
var docEl = document.documentElement;
|
||||
|
||||
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
||||
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
||||
|
||||
var clientTop = docEl.clientTop || body.clientTop || 0;
|
||||
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
||||
|
||||
var top = box.top + scrollTop - clientTop;
|
||||
var left = box.left + scrollLeft - clientLeft;
|
||||
|
||||
return { top: Math.round(top), left: Math.round(left) };
|
||||
}
|
||||
|
||||
function getPageScroll() {
|
||||
if (window.pageXOffset != undefined) {
|
||||
return {
|
||||
left: pageXOffset,
|
||||
top: pageYOffset
|
||||
// показать и запомнить подсказку
|
||||
showingTooltip = showTooltip(tooltip, target);
|
||||
}
|
||||
}
|
||||
|
||||
var html = document.documentElement;
|
||||
var body = document.body;
|
||||
document.onmouseout = function() {
|
||||
// возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
|
||||
// но в этом случае сразу же будет и mouseover,
|
||||
// то есть подсказка будет уничтожена и тут же показана заново
|
||||
//
|
||||
// это лишние расходы, их можно избежать дополнительными проверками
|
||||
if (showingTooltip) {
|
||||
document.body.removeChild(showingTooltip);
|
||||
showingTooltip = false;
|
||||
}
|
||||
|
||||
var top = html.scrollTop || body && body.scrollTop || 0;
|
||||
top -= html.clientTop;
|
||||
}
|
||||
|
||||
var left = html.scrollLeft || body && body.scrollLeft || 0;
|
||||
left -= html.clientLeft;
|
||||
|
||||
return { top: top, left: left };
|
||||
}
|
||||
function showTooltip(text, elem) {
|
||||
var tooltipElem = document.createElement('div');
|
||||
tooltipElem.className = 'tooltip';
|
||||
tooltipElem.innerHTML = text;
|
||||
document.body.appendChild(tooltipElem);
|
||||
|
||||
</script>
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var left = coords.left + (elem.offsetWidth - tooltipElem.offsetWidth) / 2;
|
||||
if (left < 0) left = 0; // не вылезать за левую границу экрана
|
||||
|
||||
// не вылезать за верхнюю границу окна
|
||||
var top = coords.top - tooltipElem.offsetHeight - 5;
|
||||
if (top < 0) {
|
||||
top = coords.top + elem.offsetHeight + 5;
|
||||
}
|
||||
|
||||
tooltipElem.style.left = left + 'px';
|
||||
tooltipElem.style.top = top + 'px';
|
||||
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getCoords(elem) {
|
||||
var box = elem.getBoundingClientRect();
|
||||
|
||||
var body = document.body;
|
||||
var docEl = document.documentElement;
|
||||
|
||||
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
||||
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
||||
|
||||
var clientTop = docEl.clientTop || body.clientTop || 0;
|
||||
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
||||
|
||||
var top = box.top + scrollTop - clientTop;
|
||||
var left = box.left + scrollLeft - clientLeft;
|
||||
|
||||
return {
|
||||
top: Math.round(top),
|
||||
left: Math.round(left)
|
||||
};
|
||||
}
|
||||
|
||||
function getPageScroll() {
|
||||
if (window.pageXOffset != undefined) {
|
||||
return {
|
||||
left: pageXOffset,
|
||||
top: pageYOffset
|
||||
}
|
||||
}
|
||||
|
||||
var html = document.documentElement;
|
||||
var body = document.body;
|
||||
|
||||
var top = html.scrollTop || body && body.scrollTop || 0;
|
||||
top -= html.clientTop;
|
||||
|
||||
var left = html.scrollLeft || body && body.scrollLeft || 0;
|
||||
left -= html.clientLeft;
|
||||
|
||||
return {
|
||||
top: top,
|
||||
left: left
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,50 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать при прокрутке */
|
||||
}
|
||||
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать при прокрутке */
|
||||
}
|
||||
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +1,43 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="hoverIntent.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="elem" class="clock">
|
||||
<span class="hours">12</span>
|
||||
:
|
||||
<span class="minutes">30</span>
|
||||
:
|
||||
<span class="hours">12</span> :
|
||||
<span class="minutes">30</span> :
|
||||
<span class="seconds">00</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +1,43 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="hoverIntent.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="elem" class="clock">
|
||||
<span class="hours">12</span>
|
||||
:
|
||||
<span class="minutes">30</span>
|
||||
:
|
||||
<span class="hours">12</span> :
|
||||
<span class="minutes">30</span> :
|
||||
<span class="seconds">00</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,49 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong>
|
||||
<br>Metal
|
||||
<br>Silver
|
||||
<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong>
|
||||
<br>Water
|
||||
<br>Blue
|
||||
<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong>
|
||||
<br>Earth
|
||||
<br>Yellow
|
||||
<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong>
|
||||
<br>Metal
|
||||
<br>Gold
|
||||
<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong>
|
||||
<br>All
|
||||
<br>Purple
|
||||
<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong>
|
||||
<br>Wood
|
||||
<br>Blue
|
||||
<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong>
|
||||
<br>Earth
|
||||
<br>Brown
|
||||
<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong>
|
||||
<br>Fire
|
||||
<br>Orange
|
||||
<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong>
|
||||
<br>Wood
|
||||
<br>Green
|
||||
<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,49 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong>
|
||||
<br>Metal
|
||||
<br>Silver
|
||||
<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong>
|
||||
<br>Water
|
||||
<br>Blue
|
||||
<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong>
|
||||
<br>Earth
|
||||
<br>Yellow
|
||||
<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong>
|
||||
<br>Metal
|
||||
<br>Gold
|
||||
<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong>
|
||||
<br>All
|
||||
<br>Purple
|
||||
<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong>
|
||||
<br>Wood
|
||||
<br>Blue
|
||||
<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong>
|
||||
<br>Earth
|
||||
<br>Brown
|
||||
<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong>
|
||||
<br>Fire
|
||||
<br>Orange
|
||||
<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong>
|
||||
<br>Wood
|
||||
<br>Green
|
||||
<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,49 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong>
|
||||
<br>Metal
|
||||
<br>Silver
|
||||
<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong>
|
||||
<br>Water
|
||||
<br>Blue
|
||||
<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong>
|
||||
<br>Earth
|
||||
<br>Yellow
|
||||
<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong>
|
||||
<br>Metal
|
||||
<br>Gold
|
||||
<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong>
|
||||
<br>All
|
||||
<br>Purple
|
||||
<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong>
|
||||
<br>Wood
|
||||
<br>Blue
|
||||
<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong>
|
||||
<br>Earth
|
||||
<br>Brown
|
||||
<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong>
|
||||
<br>Fire
|
||||
<br>Orange
|
||||
<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong>
|
||||
<br>Wood
|
||||
<br>Green
|
||||
<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,19 +1,22 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="blue" onmouseenter="log(event)" onmouseleave="log(event)">
|
||||
<div id="red"></div>
|
||||
</div>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="blue" onmouseenter="log(event)" onmouseleave="log(event)">
|
||||
<div id="red"></div>
|
||||
</div>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,22 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="blue" onmouseover="mouselog(event)" onmouseout="mouselog(event)">
|
||||
|
||||
<div class="blue" onmouseover="mouselog(event)" onmouseout="mouselog(event)">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea id="text">mouseover [target: blue]
|
||||
mouseout [target: blue]
|
||||
mouseover [target: red]
|
||||
</textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<textarea id="text">mouseover [target: blue] mouseout [target: blue] mouseover [target: red]
|
||||
</textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="green">
|
||||
<div id="red">Тест</div>
|
||||
</div>
|
||||
|
||||
<input onclick="clearText()" value="Очистить" type="button">
|
||||
<input onclick="clearText()" value="Очистить" type="button">
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="smiley-green">
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="smiley-yellow">
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="smiley-red">
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<textarea id="log" style="width:400px;height:100px">Здесь будут события и relatedTarget
|
||||
</textarea>
|
||||
</textarea>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,65 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="slider" class="slider">
|
||||
<div class="thumb"></div>
|
||||
</div>
|
||||
<div id="slider" class="slider">
|
||||
<div class="thumb"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var sliderElem = document.getElementById('slider');
|
||||
var thumbElem = sliderElem.children[0];
|
||||
|
||||
var sliderElem = document.getElementById('slider');
|
||||
var thumbElem = sliderElem.children[0];
|
||||
thumbElem.onmousedown = function(e) {
|
||||
var thumbCoords = getCoords(thumbElem);
|
||||
var shiftX = e.pageX - thumbCoords.left;
|
||||
// shiftY здесь не нужен, слайдер двигается только по горизонтали
|
||||
|
||||
thumbElem.onmousedown = function(e) {
|
||||
var thumbCoords = getCoords(thumbElem);
|
||||
var shiftX = e.pageX - thumbCoords.left;
|
||||
// shiftY здесь не нужен, слайдер двигается только по горизонтали
|
||||
var sliderCoords = getCoords(sliderElem);
|
||||
|
||||
var sliderCoords = getCoords(sliderElem);
|
||||
document.onmousemove = function(e) {
|
||||
// вычесть координату родителя, т.к. position: relative
|
||||
var newLeft = e.pageX - shiftX - sliderCoords.left;
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
// вычесть координату родителя, т.к. position: relative
|
||||
var newLeft = e.pageX - shiftX - sliderCoords.left;
|
||||
// курсор ушёл вне слайдера
|
||||
if (newLeft < 0) {
|
||||
newLeft = 0;
|
||||
}
|
||||
var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
|
||||
if (newLeft > rightEdge) {
|
||||
newLeft = rightEdge;
|
||||
}
|
||||
|
||||
thumbElem.style.left = newLeft + 'px';
|
||||
}
|
||||
|
||||
document.onmouseup = function() {
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
};
|
||||
|
||||
return false; // disable selection start (cursor change)
|
||||
};
|
||||
|
||||
thumbElem.ondragstart = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
function getCoords(elem) { // кроме IE8-
|
||||
var box = elem.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: box.top + pageYOffset,
|
||||
left: box.left + pageXOffset
|
||||
};
|
||||
|
||||
// курсор ушёл вне слайдера
|
||||
if (newLeft < 0) {
|
||||
newLeft = 0;
|
||||
}
|
||||
var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
|
||||
if (newLeft > rightEdge) {
|
||||
newLeft = rightEdge;
|
||||
}
|
||||
|
||||
thumbElem.style.left = newLeft + 'px';
|
||||
}
|
||||
|
||||
document.onmouseup = function() {
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
};
|
||||
|
||||
return false; // disable selection start (cursor change)
|
||||
};
|
||||
|
||||
thumbElem.ondragstart = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
function getCoords(elem) { // кроме IE8-
|
||||
var box = elem.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: box.top + pageYOffset,
|
||||
left: box.left + pageXOffset
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="slider" class="slider">
|
||||
<div class="thumb"></div>
|
||||
</div>
|
||||
<div id="slider" class="slider">
|
||||
<div class="thumb"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ...Ваш код..
|
||||
</script>
|
||||
<script>
|
||||
// ...Ваш код..
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,21 +1,23 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="soccer.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h2>Расставьте супергероев по полю.</h2>
|
||||
|
||||
|
||||
<p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
|
||||
|
||||
|
||||
<p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
|
||||
|
||||
|
||||
<p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
|
||||
|
||||
|
||||
<div id="field">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hero draggable" id="hero1"></div>
|
||||
|
|
@ -31,4 +33,5 @@
|
|||
|
||||
<script src="soccer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,21 +1,23 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="soccer.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h2>Расставьте супергероев по полю.</h2>
|
||||
|
||||
|
||||
<p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
|
||||
|
||||
|
||||
<p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
|
||||
|
||||
|
||||
<p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>
|
||||
|
||||
|
||||
<div id="field">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hero draggable" id="hero1"></div>
|
||||
|
|
@ -31,4 +33,5 @@
|
|||
|
||||
<script src="soccer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +1,46 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body style="height: 200px">
|
||||
|
||||
<p>Кликните по мячу и тяните, чтобы двигать его.</p>
|
||||
<p>Кликните по мячу и тяните, чтобы двигать его.</p>
|
||||
|
||||
<img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
|
||||
<img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
|
||||
|
||||
|
||||
<script>
|
||||
var ball = document.getElementById('ball');
|
||||
<script>
|
||||
var ball = document.getElementById('ball');
|
||||
|
||||
ball.onmousedown = function(e) {
|
||||
ball.onmousedown = function(e) {
|
||||
|
||||
ball.style.position = 'absolute';
|
||||
moveAt(e);
|
||||
ball.style.position = 'absolute';
|
||||
moveAt(e);
|
||||
|
||||
document.body.appendChild(ball);
|
||||
document.body.appendChild(ball);
|
||||
|
||||
ball.style.zIndex = 1000; // показывать мяч над другими элементами
|
||||
|
||||
function moveAt(e) {
|
||||
ball.style.left = e.pageX - ball.offsetWidth/2 + 'px';
|
||||
ball.style.top = e.pageY - ball.offsetHeight/2 + 'px';
|
||||
}
|
||||
ball.style.zIndex = 1000; // показывать мяч над другими элементами
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
moveAt(e);
|
||||
};
|
||||
function moveAt(e) {
|
||||
ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
|
||||
ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
|
||||
}
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
moveAt(e);
|
||||
};
|
||||
|
||||
ball.onmouseup = function() {
|
||||
document.onmousemove = null;
|
||||
ball.onmouseup = null;
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
ball.onmouseup = function() {
|
||||
document.onmousemove = null;
|
||||
ball.onmouseup = null;
|
||||
};
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,49 +1,51 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body style="height: 200px">
|
||||
|
||||
<p>Кликните по мячу и тяните, чтобы двигать его.</p>
|
||||
<p>Кликните по мячу и тяните, чтобы двигать его.</p>
|
||||
|
||||
<img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
|
||||
<img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
|
||||
|
||||
|
||||
<script>
|
||||
var ball = document.getElementById('ball');
|
||||
<script>
|
||||
var ball = document.getElementById('ball');
|
||||
|
||||
ball.onmousedown = function(e) {
|
||||
ball.onmousedown = function(e) {
|
||||
|
||||
ball.style.position = 'absolute';
|
||||
moveAt(e);
|
||||
ball.style.position = 'absolute';
|
||||
moveAt(e);
|
||||
|
||||
document.body.appendChild(ball);
|
||||
document.body.appendChild(ball);
|
||||
|
||||
ball.style.zIndex = 1000; // показывать мяч над другими элементами
|
||||
|
||||
function moveAt(e) {
|
||||
ball.style.left = e.pageX - ball.offsetWidth/2 + 'px';
|
||||
ball.style.top = e.pageY - ball.offsetHeight/2 + 'px';
|
||||
}
|
||||
ball.style.zIndex = 1000; // показывать мяч над другими элементами
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
moveAt(e);
|
||||
};
|
||||
function moveAt(e) {
|
||||
ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
|
||||
ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
|
||||
}
|
||||
|
||||
ball.onmouseup = function() {
|
||||
document.onmousemove = null;
|
||||
ball.onmouseup = null;
|
||||
};
|
||||
}
|
||||
document.onmousemove = function(e) {
|
||||
moveAt(e);
|
||||
};
|
||||
|
||||
ball.onmouseup = function() {
|
||||
document.onmousemove = null;
|
||||
ball.onmouseup = null;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
ball.ondragstart = function() {
|
||||
return false;
|
||||
};
|
||||
ball.ondragstart = function() {
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,63 +1,65 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body style="height: 200px">
|
||||
|
||||
<p>Кликните по мячу и тяните, чтобы двигать его.</p>
|
||||
<p>Кликните по мячу и тяните, чтобы двигать его.</p>
|
||||
|
||||
<img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
|
||||
<img src="https://js.cx/clipart/ball.svg" style="cursor:pointer" width="40" height="40" id="ball">
|
||||
|
||||
|
||||
<script>
|
||||
var ball = document.getElementById('ball');
|
||||
<script>
|
||||
var ball = document.getElementById('ball');
|
||||
|
||||
ball.onmousedown = function(e) {
|
||||
ball.onmousedown = function(e) {
|
||||
|
||||
var coords = getCoords(ball);
|
||||
var shiftX = e.pageX - coords.left;
|
||||
var shiftY = e.pageY - coords.top;
|
||||
var coords = getCoords(ball);
|
||||
var shiftX = e.pageX - coords.left;
|
||||
var shiftY = e.pageY - coords.top;
|
||||
|
||||
ball.style.position = 'absolute';
|
||||
document.body.appendChild(ball);
|
||||
moveAt(e);
|
||||
ball.style.position = 'absolute';
|
||||
document.body.appendChild(ball);
|
||||
moveAt(e);
|
||||
|
||||
ball.style.zIndex = 1000; // над другими элементами
|
||||
ball.style.zIndex = 1000; // над другими элементами
|
||||
|
||||
function moveAt(e) {
|
||||
ball.style.left = e.pageX - shiftX + 'px';
|
||||
ball.style.top = e.pageY - shiftY + 'px';
|
||||
}
|
||||
function moveAt(e) {
|
||||
ball.style.left = e.pageX - shiftX + 'px';
|
||||
ball.style.top = e.pageY - shiftY + 'px';
|
||||
}
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
moveAt(e);
|
||||
};
|
||||
document.onmousemove = function(e) {
|
||||
moveAt(e);
|
||||
};
|
||||
|
||||
ball.onmouseup = function() {
|
||||
document.onmousemove = null;
|
||||
ball.onmouseup = null;
|
||||
};
|
||||
ball.onmouseup = function() {
|
||||
document.onmousemove = null;
|
||||
ball.onmouseup = null;
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ball.ondragstart = function() {
|
||||
return false;
|
||||
};
|
||||
ball.ondragstart = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
function getCoords(elem) { // кроме IE8-
|
||||
var box = elem.getBoundingClientRect();
|
||||
function getCoords(elem) { // кроме IE8-
|
||||
var box = elem.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: box.top + pageYOffset,
|
||||
left: box.left + pageXOffset
|
||||
};
|
||||
return {
|
||||
top: box.top + pageYOffset,
|
||||
left: box.left + pageXOffset
|
||||
};
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
|
||||
|
|
@ -13,26 +14,28 @@
|
|||
DragManager.onDragEnd = function(dragObject, dropElem) {
|
||||
dragObject.elem.style.display = 'none';
|
||||
dropElem.classList.add('computer-smile');
|
||||
setTimeout(function() {
|
||||
dropElem.classList.remove('computer-smile');
|
||||
setTimeout(function() {
|
||||
dropElem.classList.remove('computer-smile');
|
||||
}, 200);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="height:64px">
|
||||
<img src="https://js.cx/browsers/chrome.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/firefox.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/ie.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/opera.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/safari.svg" class="draggable">
|
||||
</div>
|
||||
<div style="height:64px">
|
||||
<img src="https://js.cx/browsers/chrome.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/firefox.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/ie.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/opera.svg" class="draggable">
|
||||
<img src="https://js.cx/browsers/safari.svg" class="draggable">
|
||||
</div>
|
||||
|
||||
<p>Браузер переносить сюда:</p>
|
||||
<p>Браузер переносить сюда:</p>
|
||||
|
||||
<div class="computer droppable">
|
||||
</div>
|
||||
<div class="computer droppable">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,50 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p id="text" style="margin: 40px; width: 200px; height:60px; border: 1px solid red">
|
||||
При прокрутке колёсика мыши над этим элементом, он будет масштабироваться.
|
||||
</p>
|
||||
<script>
|
||||
function addOnWheel(elem, handler) {
|
||||
if (elem.addEventListener) {
|
||||
if ('onwheel' in document) {
|
||||
// IE9+, FF17+
|
||||
elem.addEventListener ("wheel", handler);
|
||||
} else if ('onmousewheel' in document) {
|
||||
// устаревший вариант события
|
||||
elem.addEventListener ("mousewheel", handler);
|
||||
} else {
|
||||
// 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
|
||||
elem.addEventListener ("MozMousePixelScroll", handler);
|
||||
<p id="text" style="margin: 40px; width: 200px; height:60px; border: 1px solid red">
|
||||
При прокрутке колёсика мыши над этим элементом, он будет масштабироваться.
|
||||
</p>
|
||||
<script>
|
||||
function addOnWheel(elem, handler) {
|
||||
if (elem.addEventListener) {
|
||||
if ('onwheel' in document) {
|
||||
// IE9+, FF17+
|
||||
elem.addEventListener("wheel", handler);
|
||||
} else if ('onmousewheel' in document) {
|
||||
// устаревший вариант события
|
||||
elem.addEventListener("mousewheel", handler);
|
||||
} else {
|
||||
// 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
|
||||
elem.addEventListener("MozMousePixelScroll", handler);
|
||||
}
|
||||
} else { // IE8-
|
||||
text.attachEvent("onmousewheel", handler);
|
||||
}
|
||||
}
|
||||
} else { // IE8-
|
||||
text.attachEvent ("onmousewheel", handler);
|
||||
}
|
||||
}
|
||||
|
||||
var scale = 1;
|
||||
var scale = 1;
|
||||
|
||||
addOnWheel(text, function(e) {
|
||||
addOnWheel(text, function(e) {
|
||||
|
||||
var delta = e.deltaY || e.detail || e.wheelDelta;
|
||||
|
||||
// отмасштабируем при помощи CSS
|
||||
if (delta > 0) scale += 0.05;
|
||||
else scale -= 0.05;
|
||||
var delta = e.deltaY || e.detail || e.wheelDelta;
|
||||
|
||||
text.style.transform = text.style.WebkitTransform = text.style.MsTransform = 'scale(' + scale + ')';
|
||||
// отмасштабируем при помощи CSS
|
||||
if (delta > 0) scale += 0.05;
|
||||
else scale -= 0.05;
|
||||
|
||||
// отменим прокрутку
|
||||
e.preventDefault();
|
||||
});
|
||||
text.style.transform = text.style.WebkitTransform = text.style.MsTransform = 'scale(' + scale + ')';
|
||||
|
||||
</script>
|
||||
// отменим прокрутку
|
||||
e.preventDefault();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,38 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="fix-textarea-scroll.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="height: 1000px; position: relative">
|
||||
|
||||
<header>
|
||||
<h2>Начало документа</h2>
|
||||
</header>
|
||||
<header>
|
||||
<h2>Начало документа</h2>
|
||||
</header>
|
||||
|
||||
<textarea cols="80" rows="10">
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
</textarea>
|
||||
<textarea cols="80" rows="10">
|
||||
прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня
|
||||
</textarea>
|
||||
|
||||
|
||||
<footer style="position: absolute; bottom: 0">
|
||||
Конец документа.
|
||||
</footer>
|
||||
<footer style="position: absolute; bottom: 0">
|
||||
Конец документа.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,37 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body style="height: 1000px; position: relative">
|
||||
|
||||
<header>
|
||||
<h2>Начало документа</h2>
|
||||
</header>
|
||||
<header>
|
||||
<h2>Начало документа</h2>
|
||||
</header>
|
||||
|
||||
<textarea cols="80" rows="10">
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
прокрути меня
|
||||
</textarea>
|
||||
<textarea cols="80" rows="10">
|
||||
прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня прокрути меня
|
||||
</textarea>
|
||||
|
||||
|
||||
<footer style="position: absolute; bottom: 0">
|
||||
Конец документа.
|
||||
</footer>
|
||||
<footer style="position: absolute; bottom: 0">
|
||||
Конец документа.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#container {
|
||||
width: 200px;
|
||||
|
|
@ -10,51 +11,51 @@
|
|||
background: #0FF;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Прокрутка: <span id="delta">0</span>
|
||||
<div id="container">
|
||||
Прокрути надо мной.
|
||||
</div>
|
||||
Прокрутка: <span id="delta">0</span>
|
||||
<div id="container">
|
||||
Прокрути надо мной.
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var elem = document.getElementById('container');
|
||||
<script>
|
||||
var elem = document.getElementById('container');
|
||||
|
||||
if (elem.addEventListener) {
|
||||
if ('onwheel' in document) {
|
||||
// IE9+, FF17+
|
||||
elem.addEventListener ("wheel", onWheel);
|
||||
} else if ('onmousewheel' in document) {
|
||||
// устаревший вариант события
|
||||
elem.addEventListener ("mousewheel", onWheel);
|
||||
} else {
|
||||
// Firefox < 17
|
||||
elem.addEventListener ("MozMousePixelScroll", onWheel);
|
||||
}
|
||||
} else { // IE8-
|
||||
elem.attachEvent ("onmousewheel", onWheel);
|
||||
}
|
||||
if (elem.addEventListener) {
|
||||
if ('onwheel' in document) {
|
||||
// IE9+, FF17+
|
||||
elem.addEventListener("wheel", onWheel);
|
||||
} else if ('onmousewheel' in document) {
|
||||
// устаревший вариант события
|
||||
elem.addEventListener("mousewheel", onWheel);
|
||||
} else {
|
||||
// Firefox < 17
|
||||
elem.addEventListener("MozMousePixelScroll", onWheel);
|
||||
}
|
||||
} else { // IE8-
|
||||
elem.attachEvent("onmousewheel", onWheel);
|
||||
}
|
||||
|
||||
|
||||
// Это решение предусматривает поддержку IE8-
|
||||
function onWheel(e) {
|
||||
e = e || window.event;
|
||||
// Это решение предусматривает поддержку IE8-
|
||||
function onWheel(e) {
|
||||
e = e || window.event;
|
||||
|
||||
// deltaY, detail содержат пиксели
|
||||
// wheelDelta не дает возможность узнать количество пикселей
|
||||
// onwheel || MozMousePixelScroll || onmousewheel
|
||||
var delta = e.deltaY || e.detail || e.wheelDelta;
|
||||
// deltaY, detail содержат пиксели
|
||||
// wheelDelta не дает возможность узнать количество пикселей
|
||||
// onwheel || MozMousePixelScroll || onmousewheel
|
||||
var delta = e.deltaY || e.detail || e.wheelDelta;
|
||||
|
||||
var info = document.getElementById('delta');
|
||||
var info = document.getElementById('delta');
|
||||
|
||||
info.innerHTML = +info.innerHTML + delta;
|
||||
info.innerHTML = +info.innerHTML + delta;
|
||||
|
||||
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
|
||||
}
|
||||
|
||||
</script>
|
||||
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
|
||||
.column-right {
|
||||
margin-left: 30%;
|
||||
width: 70%;
|
||||
background: tan;
|
||||
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||
overflow: auto;
|
||||
/* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
line-height: 60px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
|
||||
#avatar {
|
||||
float:left;
|
||||
float: left;
|
||||
margin: 0 1em .5em 0;
|
||||
border: 1px solid black;
|
||||
text-align:center;
|
||||
background:white;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -46,64 +49,81 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">Шапка</div>
|
||||
<div class="header">Шапка</div>
|
||||
|
||||
<div class="column-left">
|
||||
<div class="inner">
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div class="inner">
|
||||
<div class="column-left">
|
||||
<div class="inner">
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div class="inner">
|
||||
|
||||
<h3>Винни-Пух</h3>
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<div id="avatar">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из мультфильма</div>
|
||||
</div>
|
||||
<div id="avatar">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
|
||||
содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||
|
||||
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.</p>
|
||||
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
|
||||
Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
|
||||
привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
|
||||
военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
|
||||
надпись.</p>
|
||||
|
||||
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
|
||||
не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
|
||||
в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||
|
||||
|
||||
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2].
|
||||
Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи</p>
|
||||
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный
|
||||
лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер
|
||||
Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. Алан Милн, Кристофер Робин и Винни-Пух. Фотография
|
||||
из Британской национальной портретной галереи</p>
|
||||
|
||||
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем
|
||||
рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие
|
||||
эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||
|
||||
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
|
||||
Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
|
||||
сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
|
||||
опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
|
||||
возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var avatarElem = document.getElementById('avatar');
|
||||
<script>
|
||||
var avatarElem = document.getElementById('avatar');
|
||||
|
||||
var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
|
||||
var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
|
||||
|
||||
window.onscroll = function() {
|
||||
if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
|
||||
avatarElem.classList.remove('fixed');
|
||||
} else if (window.pageYOffset > avatarSourceBottom) {
|
||||
avatarElem.classList.add('fixed');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
window.onscroll = function() {
|
||||
if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
|
||||
avatarElem.classList.remove('fixed');
|
||||
} else if (window.pageYOffset > avatarSourceBottom) {
|
||||
avatarElem.classList.add('fixed');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,91 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
|
||||
.column-right {
|
||||
margin-left: 30%;
|
||||
width: 70%;
|
||||
background: tan;
|
||||
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||
overflow: auto;
|
||||
/* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
line-height: 60px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
|
||||
#avatar {
|
||||
float:left;
|
||||
float: left;
|
||||
margin: 0 1em .5em 0;
|
||||
border: 1px solid black;
|
||||
text-align:center;
|
||||
background:white;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">Шапка</div>
|
||||
<div class="header">Шапка</div>
|
||||
|
||||
<div class="column-left">
|
||||
<div class="inner">
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div class="inner">
|
||||
<div class="column-left">
|
||||
<div class="inner">
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div class="inner">
|
||||
|
||||
<h3>Винни-Пух</h3>
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<div id="avatar">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из мультфильма</div>
|
||||
</div>
|
||||
<div id="avatar">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
|
||||
содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||
|
||||
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.</p>
|
||||
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
|
||||
Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
|
||||
привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
|
||||
военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
|
||||
надпись.</p>
|
||||
|
||||
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
|
||||
не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
|
||||
в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||
|
||||
|
||||
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2].
|
||||
Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи</p>
|
||||
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный
|
||||
лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер
|
||||
Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. Алан Милн, Кристофер Робин и Винни-Пух. Фотография
|
||||
из Британской национальной портретной галереи</p>
|
||||
|
||||
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем
|
||||
рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие
|
||||
эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||
|
||||
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
|
||||
Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
|
||||
сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
|
||||
опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
|
||||
возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,98 +1,102 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
body, html {
|
||||
height:100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#matrix {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
#updown {
|
||||
height: 9px;
|
||||
width: 14px;
|
||||
color: green;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#updown.up::before {
|
||||
content: '▲';
|
||||
}
|
||||
|
||||
#updown.down::before {
|
||||
content: '▼';
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#updown {
|
||||
height: 9px;
|
||||
width: 14px;
|
||||
color: green;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#updown.up::before {
|
||||
content: '▲';
|
||||
}
|
||||
|
||||
#updown.down::before {
|
||||
content: '▼';
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="matrix">
|
||||
<script>for (var i = 0; i < 2000; i++) document.writeln(i)</script>
|
||||
</div>
|
||||
<div id="matrix">
|
||||
<script>
|
||||
for (var i = 0; i < 2000; i++) document.writeln(i)
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div id="updown"></div>
|
||||
<div id="updown"></div>
|
||||
|
||||
<script>
|
||||
var updownElem = document.getElementById('updown');
|
||||
<script>
|
||||
var updownElem = document.getElementById('updown');
|
||||
|
||||
var pageYLabel = 0;
|
||||
var pageYLabel = 0;
|
||||
|
||||
updownElem.onclick = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
updownElem.onclick = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
switch(this.className) {
|
||||
case 'up':
|
||||
pageYLabel = pageY;
|
||||
window.scrollTo(0, 0);
|
||||
this.className = 'down';
|
||||
break;
|
||||
switch (this.className) {
|
||||
case 'up':
|
||||
pageYLabel = pageY;
|
||||
window.scrollTo(0, 0);
|
||||
this.className = 'down';
|
||||
break;
|
||||
|
||||
case 'down':
|
||||
window.scrollTo(0, pageYLabel);
|
||||
this.className = 'up';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.onscroll = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
var innerHeight = document.documentElement.clientHeight;
|
||||
|
||||
switch(updownElem.className) {
|
||||
case '':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
case 'down':
|
||||
window.scrollTo(0, pageYLabel);
|
||||
this.className = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'up':
|
||||
if (pageY < innerHeight) {
|
||||
updownElem.className = '';
|
||||
}
|
||||
|
||||
window.onscroll = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
var innerHeight = document.documentElement.clientHeight;
|
||||
|
||||
switch (updownElem.className) {
|
||||
case '':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'up':
|
||||
if (pageY < innerHeight) {
|
||||
updownElem.className = '';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'down':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
}
|
||||
break;
|
||||
|
||||
case 'down':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,35 +1,41 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body, html {
|
||||
height:100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#matrix {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Символы для стрелок: ▲ ▼
|
||||
Символы для стрелок: ▲ ▼
|
||||
|
||||
<div id="matrix">
|
||||
<script>for (var i = 0; i < 2000; i++) document.writeln(i)</script>
|
||||
</div>
|
||||
<div id="matrix">
|
||||
<script>
|
||||
for (var i = 0; i < 2000; i++) document.writeln(i)
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ... ваш код
|
||||
// при необходимости, в документ можно добавить элементы и стили
|
||||
</script>
|
||||
<script>
|
||||
// ... ваш код
|
||||
// при необходимости, в документ можно добавить элементы и стили
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -8,152 +9,156 @@
|
|||
text-align: justify;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.news-item .title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
|
||||
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
|
||||
|
||||
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Космопорт Америка \ Architecture</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Космопорт Америка \ Architecture</div>
|
||||
|
||||
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
|
||||
площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
|
||||
обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||
|
||||
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
|
||||
McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||
|
||||
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
|
||||
Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||
<div class="news-item">
|
||||
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||
|
||||
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
|
||||
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
|
||||
Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
|
||||
</div>
|
||||
|
||||
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
|
||||
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
|
||||
</div>
|
||||
|
||||
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
|
||||
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
|
||||
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
|
||||
|
||||
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Фотограф Emily Lee \ Photography</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Фотограф Emily Lee \ Photography</div>
|
||||
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
|
||||
большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
|
||||
|
||||
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Иконы моды в Fashimals \ Creative</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Иконы моды в Fashimals \ Creative</div>
|
||||
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
|
||||
|
||||
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
|
||||
</div>
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Проверяет элемент на попадание в видимую часть экрана.
|
||||
* Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
|
||||
*/
|
||||
function isVisible(elem) {
|
||||
<script>
|
||||
/**
|
||||
* Проверяет элемент на попадание в видимую часть экрана.
|
||||
* Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
|
||||
*/
|
||||
function isVisible(elem) {
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
|
||||
var topVisible = coords.top > 0 && coords.top < windowHeight;
|
||||
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
||||
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
|
||||
var topVisible = coords.top > 0 && coords.top < windowHeight;
|
||||
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
||||
|
||||
return topVisible || bottomVisible;
|
||||
}
|
||||
|
||||
/**
|
||||
Вариант проверки, считающий элемент видимым,
|
||||
если он не более чем -1 страница назад или +1 страница вперед
|
||||
|
||||
function isVisible(elem) {
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
var extendedTop = -windowHeight;
|
||||
var extendedBottom = 2 * windowHeight;
|
||||
|
||||
// top visible || bottom visible
|
||||
var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
|
||||
var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
|
||||
|
||||
return topVisible || bottomVisible;
|
||||
}
|
||||
*/
|
||||
|
||||
function showVisible() {
|
||||
var imgs = document.getElementsByTagName('img');
|
||||
for(var i=0; i<imgs.length; i++) {
|
||||
|
||||
var img = imgs[i];
|
||||
|
||||
var realsrc = img.getAttribute('realsrc');
|
||||
if (!realsrc) continue;
|
||||
|
||||
if (isVisible(img)) {
|
||||
img.src = realsrc;
|
||||
img.setAttribute('realsrc', '');
|
||||
return topVisible || bottomVisible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
Вариант проверки, считающий элемент видимым,
|
||||
если он не более чем -1 страница назад или +1 страница вперед
|
||||
|
||||
window.onscroll = showVisible;
|
||||
showVisible();
|
||||
function isVisible(elem) {
|
||||
|
||||
</script>
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
var extendedTop = -windowHeight;
|
||||
var extendedBottom = 2 * windowHeight;
|
||||
|
||||
// top visible || bottom visible
|
||||
var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
|
||||
var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
|
||||
|
||||
return topVisible || bottomVisible;
|
||||
}
|
||||
*/
|
||||
|
||||
function showVisible() {
|
||||
var imgs = document.getElementsByTagName('img');
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
|
||||
var img = imgs[i];
|
||||
|
||||
var realsrc = img.getAttribute('realsrc');
|
||||
if (!realsrc) continue;
|
||||
|
||||
if (isVisible(img)) {
|
||||
img.src = realsrc;
|
||||
img.setAttribute('realsrc', '');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.onscroll = showVisible;
|
||||
showVisible();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,101 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.news-item {
|
||||
width: 700px;
|
||||
text-align: justify;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.news-item .title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.news-item {
|
||||
width: 700px;
|
||||
text-align: justify;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.news-item .title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
|
||||
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
|
||||
|
||||
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Космопорт Америка \ Architecture</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Космопорт Америка \ Architecture</div>
|
||||
|
||||
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
|
||||
площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
|
||||
обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||
|
||||
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
|
||||
McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||
|
||||
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
|
||||
Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||
<div class="news-item">
|
||||
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||
|
||||
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
|
||||
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
|
||||
Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
|
||||
</div>
|
||||
|
||||
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
|
||||
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
|
||||
</div>
|
||||
|
||||
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
|
||||
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
|
||||
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
|
||||
|
||||
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Фотограф Emily Lee \ Photography</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Фотограф Emily Lee \ Photography</div>
|
||||
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
|
||||
большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
|
||||
|
||||
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Иконы моды в Fashimals \ Creative</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Иконы моды в Fashimals \ Creative</div>
|
||||
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
|
||||
|
||||
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
|
||||
</div>
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
// ... ваш код ...
|
||||
</script>
|
||||
<script>
|
||||
// ... ваш код ...
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,46 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Введите ваш возраст: <input type="text">
|
||||
Введите ваш возраст:
|
||||
<input type="text">
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
document.getElementsByTagName('input')[0].onkeypress = function(e) {
|
||||
|
||||
document.getElementsByTagName('input')[0].onkeypress = function(e) {
|
||||
e = e || event;
|
||||
|
||||
e = e || event;
|
||||
if (e.ctrlKey || e.altKey || e.metaKey) return;
|
||||
|
||||
if (e.ctrlKey || e.altKey || e.metaKey) return;
|
||||
var chr = getChar(e);
|
||||
|
||||
var chr = getChar(e);
|
||||
// с null надо осторожно в неравенствах, т.к. например null >= '0' => true!
|
||||
// на всякий случай лучше вынести проверку chr == null отдельно
|
||||
if (chr == null) return;
|
||||
|
||||
// с null надо осторожно в неравенствах, т.к. например null >= '0' => true!
|
||||
// на всякий случай лучше вынести проверку chr == null отдельно
|
||||
if (chr == null) return;
|
||||
if (chr < '0' || chr > '9') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (chr < '0' || chr > '9') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
function getChar(event) {
|
||||
if (event.which == null) {
|
||||
if (event.keyCode < 32) return null;
|
||||
return String.fromCharCode(event.keyCode) // IE
|
||||
}
|
||||
|
||||
function getChar(event) {
|
||||
if (event.which == null) {
|
||||
if (event.keyCode < 32) return null;
|
||||
return String.fromCharCode(event.keyCode) // IE
|
||||
}
|
||||
if (event.which != 0 && event.charCode != 0) {
|
||||
if (event.which < 32) return null;
|
||||
return String.fromCharCode(event.which) // остальные
|
||||
}
|
||||
|
||||
if (event.which!=0 && event.charCode!=0) {
|
||||
if (event.which < 32) return null;
|
||||
return String.fromCharCode(event.which) // остальные
|
||||
}
|
||||
|
||||
return null; // специальная клавиша
|
||||
}
|
||||
|
||||
</script>
|
||||
return null; // специальная клавиша
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,36 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Введите ваш возраст: <input type="text">
|
||||
Введите ваш возраст:
|
||||
<input type="text">
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/* ваш код .. .*/
|
||||
<script>
|
||||
/* ваш код .. .*/
|
||||
|
||||
|
||||
// вспомогательная функция, если понадобится
|
||||
// вспомогательная функция, если понадобится
|
||||
|
||||
function getChar(event) {
|
||||
if (event.which == null) {
|
||||
if (event.keyCode < 32) return null;
|
||||
return String.fromCharCode(event.keyCode) // IE
|
||||
}
|
||||
function getChar(event) {
|
||||
if (event.which == null) {
|
||||
if (event.keyCode < 32) return null;
|
||||
return String.fromCharCode(event.keyCode) // IE
|
||||
}
|
||||
|
||||
if (event.which!=0 && event.charCode!=0) {
|
||||
if (event.which < 32) return null;
|
||||
return String.fromCharCode(event.which) // остальные
|
||||
}
|
||||
if (event.which != 0 && event.charCode != 0) {
|
||||
if (event.which < 32) return null;
|
||||
return String.fromCharCode(event.which) // остальные
|
||||
}
|
||||
|
||||
return null; // специальная клавиша
|
||||
}
|
||||
|
||||
</script>
|
||||
return null; // специальная клавиша
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,52 +1,55 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<body>
|
||||
|
||||
<p>Нажмите одновременно "Q" и "W" (в любой раскладке).</p>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
<p>Нажмите одновременно "Q" и "W" (в любой раскладке).</p>
|
||||
|
||||
function runOnKeys(func) {
|
||||
var codes = [].slice.call(arguments, 1);
|
||||
<script>
|
||||
function runOnKeys(func) {
|
||||
var codes = [].slice.call(arguments, 1);
|
||||
|
||||
var pressed = {};
|
||||
var pressed = {};
|
||||
|
||||
document.onkeydown = function(e) {
|
||||
e = e || window.event;
|
||||
document.onkeydown = function(e) {
|
||||
e = e || window.event;
|
||||
|
||||
pressed[e.keyCode] = true;
|
||||
pressed[e.keyCode] = true;
|
||||
|
||||
for (var i = 0; i < codes.length; i++) { // проверить, все ли клавиши нажаты
|
||||
if (!pressed[codes[i]]) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// во время показа alert, если посетитель отпустит клавиши - не возникнет keyup
|
||||
// при этом JavaScript "пропустит" факт отпускания клавиш, а pressed[keyCode] останется true
|
||||
// чтобы избежать "залипания" клавиши -- обнуляем статус всех клавиш, пусть нажимает всё заново
|
||||
pressed = {};
|
||||
|
||||
func();
|
||||
|
||||
};
|
||||
|
||||
document.onkeyup = function(e) {
|
||||
e = e || window.event;
|
||||
|
||||
delete pressed[e.keyCode];
|
||||
};
|
||||
|
||||
for(var i=0; i<codes.length; i++) { // проверить, все ли клавиши нажаты
|
||||
if (!pressed[codes[i]]) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// во время показа alert, если посетитель отпустит клавиши - не возникнет keyup
|
||||
// при этом JavaScript "пропустит" факт отпускания клавиш, а pressed[keyCode] останется true
|
||||
// чтобы избежать "залипания" клавиши -- обнуляем статус всех клавиш, пусть нажимает всё заново
|
||||
pressed = {};
|
||||
runOnKeys(
|
||||
function() {
|
||||
alert("Привет!")
|
||||
},
|
||||
"Q".charCodeAt(0),
|
||||
"W".charCodeAt(0)
|
||||
);
|
||||
</script>
|
||||
|
||||
func();
|
||||
</body>
|
||||
|
||||
};
|
||||
|
||||
document.onkeyup = function(e) {
|
||||
e = e || window.event;
|
||||
|
||||
delete pressed[e.keyCode];
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
runOnKeys(
|
||||
function() { alert("Привет!") },
|
||||
"Q".charCodeAt(0),
|
||||
"W".charCodeAt(0)
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -1,29 +1,45 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form id="form" onsubmit="return false">
|
||||
|
||||
Предотвратить действие по умолчанию для:<label><input type="checkbox" name="keydownStop" value="1"> keydown</label> <label><input type="checkbox" name="keypressStop" value="1"> keypress</label> <label><input type="checkbox" name="keyupStop" value="1"> keyup</label>
|
||||
|
||||
Предотвратить действие по умолчанию для:
|
||||
<label>
|
||||
<input type="checkbox" name="keydownStop" value="1"> keydown</label>
|
||||
<label>
|
||||
<input type="checkbox" name="keypressStop" value="1"> keypress</label>
|
||||
<label>
|
||||
<input type="checkbox" name="keyupStop" value="1"> keyup</label>
|
||||
|
||||
<p>
|
||||
Игнорировать:<label><input type="checkbox" name="keydownIgnore" value="1"> keydown</label> <label><input type="checkbox" name="keypressIgnore" value="1"> keypress</label> <label><input type="checkbox" name="keyupIgnore" value="1"> keyup</label></p>
|
||||
Игнорировать:
|
||||
<label>
|
||||
<input type="checkbox" name="keydownIgnore" value="1"> keydown</label>
|
||||
<label>
|
||||
<input type="checkbox" name="keypressIgnore" value="1"> keypress</label>
|
||||
<label>
|
||||
<input type="checkbox" name="keyupIgnore" value="1"> keyup</label>
|
||||
</p>
|
||||
|
||||
<p>Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.</p>
|
||||
|
||||
<input type="text" placeholder="Клавиши нажимать тут" id="kinput">
|
||||
|
||||
|
||||
<textarea id="area"></textarea>
|
||||
<input type="button" value="Очистить" onclick="area.value = ''"/></form>
|
||||
|
||||
</form>
|
||||
<input type="button" value="Очистить" onclick="area.value = ''" />
|
||||
</form>
|
||||
|
||||
</form>
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue