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

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-18 14:46:13 +03:00
parent 1f61c2ab1d
commit af0ee2a49e
66 changed files with 12263 additions and 2059 deletions
Download patch file Download diff file Expand all files Collapse all files

66
2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.view/index.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#mouse {
display: inline-block;
cursor: pointer;
margin: 0;
}
#mouse:focus {
outline: 1px dashed black;
}
</style>
</head>
<body>
<p>Click on the mouse and move it with arrow keys.</p>
<pre id="mouse">
_ _
(q\_/p)
/. .\
=\_t_/= __
/ \ (
(( )) )
/\) (/\ /
\ Y /-'
nn^nn
</pre>
<script>
mouse.tabIndex = 0;
mouse.onclick = function() {
this.style.left = this.getBoundingClientRect().left + 'px';
this.style.top = this.getBoundingClientRect().top + 'px';
this.style.position = 'fixed';
};
mouse.onkeydown = function(e) {
switch (e.key) {
case 'ArrowLeft':
this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
return false;
case 'ArrowUp':
this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
return false;
case 'ArrowRight':
this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
return false;
case 'ArrowDown':
this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
return false;
}
};
</script>
</body>
</html>