76 lines
2.1 KiB
Markdown
76 lines
2.1 KiB
Markdown
# Мышонок на "клавиатурном" приводе
|
||
|
||
[importance 4]
|
||
|
||
Кликните по мышонку. Затем нажимайте клавиши со стрелками, и он будет двигаться.
|
||
|
||
<style>
|
||
##mousie:focus {
|
||
outline: none;
|
||
border: 1px dashed black;
|
||
}
|
||
</style>
|
||
|
||
<div style="position:relative;top:20px;width:100px;height:100px">
|
||
<div style="width:41px; height:48px;background:url(http://js.cx/clipart/mousie.gif)" id="mousie" tabindex="0"></div>
|
||
</div>
|
||
|
||
<script>
|
||
mousie.onclick = function() {
|
||
var coords = getCoords(this);
|
||
this.style.position = 'absolute';
|
||
this.style.left = coords.left + 'px';
|
||
this.style.top = coords.top + 'px';
|
||
|
||
if (this.parentNode != document.body) {
|
||
document.body.appendChild(this);
|
||
this.focus();
|
||
}
|
||
};
|
||
|
||
|
||
mousie.onkeydown = function(e) {
|
||
e = e || event;
|
||
|
||
switch(e.keyCode) {
|
||
case 40: // вниз
|
||
this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
|
||
return false;
|
||
case 39: // вправо
|
||
this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
|
||
return false;
|
||
case 38: // вверх
|
||
this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
|
||
return false;
|
||
case 37: // влево
|
||
this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
|
||
return false;
|
||
}
|
||
};
|
||
|
||
|
||
// -----------------------
|
||
|
||
|
||
function getCoords(elem) {
|
||
var box = elem.getBoundingClientRect();
|
||
|
||
var body = document.body;
|
||
var docElem = document.documentElement;
|
||
|
||
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
|
||
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
|
||
|
||
var clientTop = docElem.clientTop || body.clientTop || 0;
|
||
var clientLeft = docElem.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) };
|
||
}
|
||
|
||
</script>
|
||
|
||
Учтите при решении, что мышонок изначально находится где-то в глубине документа, в `DIV'е` с `position:relative`.
|
||
|