Начало
Scrolls
Клавиатура Slider
Теперь вы можете перемещать изображения и объекты по экрану, просто используя клавиши со стрелками.
Use
A
to move the image toward left,
D
to move the image right.
JavaScript Scrolls:Клавиатура Slider
<!-- THREE STEPS TO INSTALL KEYBOARD SLIDER: 1. Copy the coding into the HEAD of your HTML document 2. Add the onLoad event handler into the BODY tag 3. Put the last coding into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <! > <! > <!-- Begin n = (document.layers) ? 1 : 0; ie = (document.all) ? 1 : 0; function moveImage() { if (n) { block = document.blockDiv; } if (ie) { block = blockDiv.style; } block.xpos = parseInt(block.left); block.active = 0; document.onkeydown = keyDown; document.onkeyup = keyUp; if (n) { document.captureEvents(Event.keydown | Event.keyup); } } function keyDown(e) { if (n) { var nKey = e.which; var ieKey = 0; } if (ie) { var ieKey = event.keyCode; var nKey = 0; } if ((nKey == 97 || ieKey == 65) && !block.active) { block.active = 1; slideLeft(); } if ((nKey == 100 || ieKey == 68) && !block.active) { block.active = 1; slideRight(); } } function keyUp(e) { if (n) { var nKey = e.which; var ieKey = 0; } if (ie) { var ieKey = event.keyCode; var nKey = 0; } if ((nKey == 97 || ieKey == 65 || nKey == 100 || ieKey == 68)) block.active = 0; } function slideRight() { if (block.active) { block.xpos += 5; block.left = block.xpos; status = block.xpos; setTimeout("slideRight()", 25); } } function slideLeft() { if (block.active) { block.xpos -= 5; block.left = block.xpos; status = block.xpos; setTimeout("slideLeft()", 25); } } // End --> </script> </HEAD> <!-- STEP TWO: Insert the onLoad event handler into your BODY tag --> <BODY OnLoad="moveImage()"> <!-- STEP THREE: Copy this code into the BODY of your HTML document --> <! > <! > <div id="blockDiv" STYLE="position:absolute; left:317px; top:130px; width:137px; height: 121px"> <img src="javaguy.gif" width="115" height="63"></div> Use <b>A</b> to move the image toward left, <b>D</b> to move the image right. <!-- Script Size: 2.32 KB -->