Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 18.05.2018, 12:11   #1
Kiten
Пользователь
 
Аватар для Kiten
 
Регистрация: 31.07.2012
Адрес: Абхазия
Сообщений: 15
Репутация: 11
По умолчанию Перетаскивание и увеличение объекта внутри рамки

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



Картинка увеличивается внутри рамки, т.к. у последней задан 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, но очень хотелось бы разобраться. Буду благодарен за любую помощь!
__________________
Серьезное лицо - это еще не признак ума
Kiten вне форума   Ответить с цитированием
Старый 18.05.2018, 16:24   #2
Kiten
Пользователь
 
Аватар для Kiten
 
Регистрация: 31.07.2012
Адрес: Абхазия
Сообщений: 15
Репутация: 11
По умолчанию

Товарищи!
Проблема неожиданно решилась!
__________________
Серьезное лицо - это еще не признак ума
Kiten вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отступы текста внутри рамки. Рамиль09 Microsoft Office Word 1 24.06.2014 20:56
увеличение высоты объекта в другу сторону develsnik Общие вопросы Delphi 2 18.09.2013 16:21
[Java] Создание объекта внутри объекта этогоже класса. Svarogich Помощь студентам 2 01.08.2011 16:03
Объявление метода внутри объекта JAVASCRIPt Kasper1 JavaScript, Ajax 4 09.03.2011 10:50
Перетаскивание внутри листбокса garik Общие вопросы Delphi 2 05.11.2008 00:43


14:53.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru