постоянно перемещать изменяемое / перетаскиваемое изображение на видео при изменении размера браузера - PullRequest
Новая
       58

постоянно перемещать изменяемое / перетаскиваемое изображение на видео при изменении размера браузера

0 голосов
/ 18 октября 2018

Я работаю над скрипкой , в которой я хочу постоянно перемещать / изменять размер изображения (само изображение с изменяемым размером / перетаскиваемым изображением) поверх видео при изменении размера браузера .

Фрагменты кода HTML / CSS / JS, которые я использовал:

HTML: 

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

CSS: 

.overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:red;
  opacity:.5;
  display:none;
}

JS: 

$(function() {
$('#wrapper').draggable();
$('#image').resizable({
start: function( event, ui ) {
   $('#overlay').show();
  },

stop: function( event, ui ) {
   $('#overlay').hide();
  }
  }
);
});


Постановка задачи:

Мне интересно, какие изменения я должен внести в приведенный выше код JS, чтобы всякий раз, когда я изменял размеры браузера, перетаскиваемое / изменяемое изображение также должно постоянно перемещаться .

Например: допустим, я помещаю изображение Google поверх носа парня в полноэкранном режиме , и если я изменяю размер окна браузера, изображение Google не отображаетсяоставаться над носом , как показано на скрипке https://jsfiddle.net/obn4yph0/embedded/result

1 Ответ

0 голосов
/ 18 октября 2018

Одной из идей является позиционирование по процентным значениям относительно контейнера, а не по пиксельным значениям.

Таким образом, позиционирование будет отзывчивым, то есть положение будет одинаковым по отношению к контейнеру независимо отразмер контейнера.

Расчеты для преобразования пикселей в проценты основаны на этом ответе на peteykun .
Расчеты выполняются на stop события как для изменения размера, так и для перетаскивания.

А вот JSFiddle (так как встраивание YouTube здесь не работает). 

function convert_to_percentage($el) {

  var $parent = $el.parent();

  $el.css({
    left: parseInt($el.position().left) / $parent.width() * 100 + "%",
    top: parseInt($el.position().top) / $parent.outerHeight() * 100 + "%",
    width: $el.width() / $parent.width() * 100 + "%",
    height: $el.height() / $parent.outerHeight() * 100 + "%"
  });

}

$(function() {

  var $wrapper = $('#wrapper');
  var $overlay = $('#overlay');

  convert_to_percentage($wrapper);

  $wrapper
    .draggable({
      stop: function(event, ui) {
        convert_to_percentage($wrapper);
      }
    })
    .resizable({
      start: function(event, ui) {
        $overlay.show();
      },
      stop: function(event, ui) {
        $overlay.hide();
        convert_to_percentage($wrapper);
      }
    });
});
#wrapper {
  z-index: 100;
  position: absolute;
}

#wrapper img {
  width: 100%;
  height: 100%;
}

.embed-responsive {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  opacity: .5;
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  <div class="overlay" id="overlay" />
</div>

<div id="wrapper" style="display:inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
...