Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Помогите

J1upuk

1.10.2015 - 11:25

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

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

Помогите, кому не сложно.

Dezigo

1.10.2015 - 11:39

Вот так?
http://jsfiddle.net/ktgf6swr/

J1upuk

1.10.2015 - 11:51

Не совсем, изображение должно быть ограничено рамкой 300x300px и увеличиваться уменьшаться только в ней, причём без input="range", а по нажатию с клавиатуры + и -

Dezigo

1.10.2015 - 12:11

Для Вас уже готов целый пример, нужно изменить пару моментов.
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

1.10.2015 - 12:13

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>

Быстрый ответ:

Здесь расположена полная версия этой страницы.