Помогите со вставкой картинки
Доброго времени суток!
Необходимо загрузить картинку через кнопку на сайт и добавить возможность двигать картинку вверх, вниз, влево и вправо, а так же изменять её размеры по кнопкам. Помогите пожалуйста, преподаватель на нас обиделся и дал сложное на данный момент задание. Основная проблема с привязкой вставленной картинки и кнопками для их изменения. |
Здесь про клавиши, про размер - надо делать...
https://javascript.ru/forum/events/7...e-klavish.html |
StudentKVD, а самостоятельно вы что-то сделали?
Вот вам для начала <style> .action { display:none; } .container { width:400px; height:300px; border:1px solid black; } #image { position:fixed; } </style> <button id="load" style="display:block">Загрузить картинку</button> <div id="drive"> <button id="left" class="action">Влево</button> <button id="right" class="action">Вправо</button> <button id="down" class="action">Вниз</button> <button id="up" class="action">Вверх</button> </div> <div class="container"> <img id="image" src="" alt="Здесь будет картинка"/> </div> <script> var loader = document.querySelector('#load'), image = document.querySelector('#image'), drivers = document.querySelectorAll('.action'); loader.onclick = function() { image.src = "https://javascript.ru/cat/list/donkey.gif"; loader.style.display = "none"; [].forEach.call(drivers, function(item) { item.style.display = "inline-block"; }); } drive.onclick = function(e) { var position = image.getBoundingClientRect(); console.log(position.left + ";" + position.top); switch(e.target.id) { case "left": image.style.left = (position.left - 5) + "px"; break; case "right": image.style.left = (position.left + 5) + "px"; break; case "down": image.style.top = (position.top + 5) + "px"; break; case "up": image.style.top = (position.top - 5) + "px"; break; } } </script> |
Спасибо за ответ
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 10:42. |