Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2018, 13:57
Аватар для Kiten
Интересующийся
Отправить личное сообщение для Kiten Посмотреть профиль Найти все сообщения от Kiten
 
Регистрация: 18.05.2018
Сообщений: 16

Перетаскивание и увеличение объекта внутри рамки
Всем привет!
Работаю над созданием скрипта, который позволяет делать две вещи:
* приближение и отдаление картинки внутри жесткой рамки;
* перемещение оной там же, мышью;
Изначально перед нами на странице картинка по ширине рамки. Вот скрин:



Картинка увеличивается внутри рамки, т.к. у последней задан overflow: hidden.

Мне удалось сделать эффект приближения и отдаления, но drag'n'drop не получается. Почему-то картинка изменяется в размере и выходит за пределы рамки.

Приведу коды HTML, CSS и javascript:

<div id="border1" class="main-border">           
      <img id="map" alt="" src="img/13_zagros.jpg">
</div>

Код:
.main-border {
    margin: auto;
    overflow: hidden;
    width: 500px;
    height: 300px;
    margin-top: 2%;
    border: 3px solid #663333;
//КОД ПРИБЛИЖЕНИЯ И ОТДАЛЕНИЯ, РАБОТАЕТ БОЛЕЕ-МЕНЕЕ НОРМАЛЬНО:
var block = document.getElementById('map');
var x = 100;

block.onwheel = function(event) {
    if(event.deltaY < 0 && this.style.width < "500%"){
        x += 5;
        this.style.width = x + '%';
    }
    if(event.deltaY > 0 && this.style.width > "100%"){
        x -= 5;
        this.style.width = x + '%';
    }    
    return false;
}

//КОД ПЕРЕМЕЩЕНИЯ, ТУТ ПОЛНАЯ ШЛЯПА...
var blockmove = document.getElementById('map');

blockmove.onmousedown = function(e) { 
  
  blockmove.style.position = 'absolute';
  moveAt(e);
  document.body.appendChild(blockmove);

  blockmove.style.zIndex = 1000; 
  
  function moveAt(e) {
    blockmove.style.left = e.pageX - blockmove.offsetWidth / 2 + 'px';
    blockmove.style.top = e.pageY - blockmove.offsetHeight / 2 + 'px';
  }
  
  document.onmousemove = function(e) {
    moveAt(e);
  }
  
  blockmove.onmouseup = function() {
    document.onmousemove = null;
    blockmove.onmouseup = null;
  }
}

Я не силен в Javascript, но очень хотелось бы разобраться. Буду благодарен за любую помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2018, 14:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Kiten
this.style.width > "100%"
Сообщение от Kiten
this.style.width < "500%"
это не правильно, нельзя это сравнивать
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2018, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kiten,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .main-border {
    margin: auto;
    overflow: hidden;
    width: 500px;
    height: 300px;
    border: 3px solid #663333;
    position: relative;
    }
    .main-border img{
        height:  auto;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

  </style>


</head>

<body>

<div id="border1" class="main-border">
      <img id="map" alt="" src="https://unsplash.it/500/300/?random&1">
</div>
 <script>
    //КОД ПРИБЛИЖЕНИЯ И ОТДАЛЕНИЯ, РАБОТАЕТ БОЛЕЕ-МЕНЕЕ НОРМАЛЬНО:
var block = document.getElementById('map');
var x = 100;

block.onwheel = function(event) {
        if(event.deltaY < 0 && x < 500){
        x += 5;
        this.style.width = x + '%';
    }
    if(event.deltaY > 0 && x > 100){
        x -= 5;
        this.style.width = x + '%';
    }
    return false;
}

//КОД ПЕРЕМЕЩЕНИЯ, ТУТ ПОЛНАЯ ШЛЯПА...
var blockmove = document.getElementById('border1');
var left = 0, tp = 0, xx, yy;


blockmove.onmousedown = function(e) {
  e.preventDefault();
  xx = e.pageX;
  yy = e.pageY;


  function moveAt(e) {
    block.style.left = (left + e.pageX - xx) + 'px';
    block.style.top = (tp + e.pageY - yy) + 'px';
  }

  blockmove.onmousemove = function(e) {
    moveAt(e);
  }

blockmove.onmouseleave = blockmove.onmouseup = function(e) {
    left = parseFloat(block.style.left);
    tp = parseFloat(block.style.top);
    blockmove.onmouseleave = null;
    blockmove.onmousemove = null;
    blockmove.onmouseup = null;
  }
}

  </script>
</body>
</html>

Последний раз редактировалось рони, 18.05.2018 в 14:56.
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2018, 15:18
Аватар для Kiten
Интересующийся
Отправить личное сообщение для Kiten Посмотреть профиль Найти все сообщения от Kiten
 
Регистрация: 18.05.2018
Сообщений: 16

рони,
Браво! Это то, что я хотел!
Удачи всем в программировании!
И вдохновения!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перетаскивание внутри ifram'a. kodemak Общие вопросы Javascript 2 14.01.2014 09:24
Событие внутри функции или объекта shaltay Общие вопросы Javascript 2 27.06.2013 18:05
Как обратиться к переменной внутри объекта, в произвольной функцию через его метод platedz Элементы интерфейса 15 25.08.2012 00:03
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 17:01
Можно ли получить имя экземпляра объекта внутри самого объекта? Ichigeki Общие вопросы Javascript 9 14.11.2008 19:00