Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2018, 09:47
Новичок на форуме
Отправить личное сообщение для StudentKVD Посмотреть профиль Найти все сообщения от StudentKVD
 
Регистрация: 18.10.2018
Сообщений: 2

Помогите со вставкой картинки
Доброго времени суток!

Необходимо загрузить картинку через кнопку на сайт и добавить возможность двигать картинку вверх, вниз, влево и вправо, а так же изменять её размеры по кнопкам. Помогите пожалуйста, преподаватель на нас обиделся и дал сложное на данный момент задание. Основная проблема с привязкой вставленной картинки и кнопками для их изменения.
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2018, 12:27
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

Здесь про клавиши, про размер - надо делать...
https://javascript.ru/forum/events/7...e-klavish.html
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2018, 13:00
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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>

Последний раз редактировалось Dilettante_Pro, 22.10.2018 в 11:25.
Ответить с цитированием
  #4 (permalink)  
Старый 19.10.2018, 16:44
Новичок на форуме
Отправить личное сообщение для StudentKVD Посмотреть профиль Найти все сообщения от StudentKVD
 
Регистрация: 18.10.2018
Сообщений: 2

Спасибо за ответ
Сообщение от Dilettante_Pro Посмотреть сообщение
StudentKVD, а самостоятельно вы что-то сделали?
Вот вам для начала
<style>
.action {
    display:none;
}
.container {
     width:400px;
     height:300px;
     border:1px solid black;
}
</style>
<button id="load" style="display:block">Загрузить картинку</button>
<button id="left" class="action">Влево</button>
<button id="gight" class="action">Вправо</button>
<button id="down" class="action">Вниз</button>
<button id="up" class="action">Вверх</button>
<div class="container">
   <img id="image" src="" alt="Здесь будет картинка"/>
</div>
<script>
   var loader = document.querySelector('#load'),
         image = document.querySelector('img'),
         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";
         });
   }
</script>
Все отлично, но картинка не двигается по кнопкам, Вам не составит труда привести картинку в движение?
Ответить с цитированием
  #5 (permalink)  
Старый 22.10.2018, 11:26
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от StudentKVD
Вам не составит труда привести картинку в движение?
Мне-то не трудно. Внес дополнения в пример. Жалко, что все это зря...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ПОМОГИТЕ!!!! Не отображаются картинки Falcon73 Элементы интерфейса 1 04.07.2013 15:13
помогите поставить блоку две фоновые картинки Arkinsstoun jQuery 3 22.03.2012 19:51
Помогите со скриптом для уменьшения картинки Arkinsstoun jQuery 3 07.02.2012 22:18
Вставка картинки из буфера - помогите потестить seka Ваши сайты и скрипты 0 19.01.2012 21:54
помогите сделать начало слайдшоу c рандомной картинки Nekojiru Ваши сайты и скрипты 0 20.07.2009 19:50