[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Помогите
J1upuk
Сделал 7 заданий из 8 для устройства на стажировку в фирму, ничего не вызвало затруднений кроме одного, только потому что я знаю js на уровне создать переменную и присвоить ей значение, задание такое:

Javascript. Вывести на экран изображение, ограниченное рамкой 300х300px.
Добавить возможность приближать и отдалять это изображение внутри рамки
нажатиями клавиш + и - на клавиатуре.

Помогите, кому не сложно.
Dezigo
Вот так?
http://jsfiddle.net/ktgf6swr/
J1upuk
Не совсем, изображение должно быть ограничено рамкой 300x300px и увеличиваться уменьшаться только в ней, причём без input="range", а по нажатию с клавиатуры + и -
Dezigo
Для Вас уже готов целый пример, нужно изменить пару моментов.
1. Создайте <div></div> и поместите изображение туда.
2. Повести listener

window.addEventListener("keyPress", myEventHandler, false);


function myEventHandler(e){
var keyCode = e.keyCode;
if(keyCode == 43){
//ваш-див.backgroundPositionX + 5;
} else {
//ваш-див.backgroundPositionX - 5;
}
}
;


По таблице ASCII код + это 43
3. Чтобы изображение не уходило из рамки ставьте CSS - overfow:hidden;
И не забудьте width and height = 300px;
J1upuk
Dezigo
Спасибо, решение найдено.) Смысл тот же что и у вас)

<!DOCTYPE html>
<
html>
<
head>
<
script>
var speed = 4;
function showImage(src)
{
var div = document.createElement("div");
with(div.style)
{
width = "300px";
height = "300px";
border = "2px solid black";
textAlign = "center";
overflow = "hidden";
}
document.body.appendChild(div);
img = document.createElement("img");
img.src = src;
img.width = 300;
img.height = 300;
div.appendChild (img);
}
function keyDown(key)
{
var k = 0;
if(key == 107) k = speed;
if(key == 109) k = - speed;
if (k != 0)
{
img.width = img.width + k;
img.height = img.height + k;
img.style.margin = ((300 - img.height) / 2).toString() + "px";
}
}

</script>
</
head>
<
body onkeydown="keyDown (event.keyCode)" onload="showImage('/img/1.png')">
<
h1>Изменение масштаба: кнопки [+] и [-]</h1>
</
body>
</
html>
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.