当浏览器调整大小时，不断在视频上移动可调整大小/可拖动的图像 [英] constantly move resizable/draggable image on the video when the browser is resize

问题描述

我正在研究小提琴，我想在其中不断移动/当浏览器调整大小时，在视频上调整图像(它本身是可调整大小/可拖动的图像).

我使用的 HTML/CSS/JS 代码片段是:

HTML:

<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png"/>

CSS:

.overlay {位置:绝对；宽度:100%；高度:100%；背景:红色；不透明度:.5；显示:无；}

JS:

$(function() {$('#wrapper').draggable();$('#image').resizable({开始:功能(事件，用户界面){$('#overlay').show();},停止:函数(事件，用户界面){$('#overlay').hide();}});});

问题陈述:

我想知道我应该在上面的 JS 代码中进行哪些更改，以便每当我调整浏览器大小时，可拖动/可调整大小的图像也应该不断移动.

例如:假设我在全屏模式下将 google 图像放在一个人的鼻子上，如果我调整浏览器窗口的大小，google 图像似乎不会停留在鼻子上 如小提琴所示 https://jsfiddle.net/obn4yph0/embedded/结果

解决方案

一个想法是通过相对于容器的百分比值而不是像素值来定位.

这样定位将是响应式的，这意味着无论容器的大小如何，相对于容器的位置都是相同的.

将像素转换为百分比的计算基于 这个答案.com/users/1825792/peteykun">peteykun.
对 stop 事件 执行计算以调整大小并拖动.

这里有一个 JSFiddle(因为 YouTube 嵌入在这里不起作用).

function convert_to_percentage($el) {var $parent = $el.parent();$el.css({左: parseInt($el.position().left)/$parent.width() * 100 + "%",顶部:parseInt($el.position().top)/$parent.outerHeight() * 100 + "%",宽度:$el.width()/$parent.width() * 100 + "%",高度:$el.height()/$parent.outerHeight() * 100 + "%"});}$(函数(){var $wrapper = $('#wrapper');var $overlay = $('#overlay');convert_to_percentage($wrapper);$包装器.draggable({停止:功能(事件，用户界面){convert_to_percentage($wrapper);}}).可调整大小({开始:功能(事件，用户界面){$overlay.show();},停止:功能(事件，用户界面){$overlay.hide();convert_to_percentage($wrapper);}});});

#wrapper {z-索引:100；位置:绝对；}#wrapper img {宽度:100%；高度:100%；}.embed-responsive {位置:相对；}.overlay {位置:绝对；宽度:100%；高度:100%；背景:红色；不透明度:0.5；显示:无；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><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 id="wrapper" style="display:inline-block"><img id="image" src="http://www.google.com.br/images/srpr/logo3w.png"/>

I am working on the fiddle in which I want to constantly move/resize image(which is itself resizable/draggable image) over the video when the browser is resize.

The snippets of HTML/CSS/JS code which I have used is:

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();
  }
  }
);
});

Problem Statement:

I am wondering what changes I should make in the JS code above so that whenever I resize the browser, the draggable/resizable image should also constantly move.

For example: Let us suppose I place the google image over the nose of a guy in full screen and if I resize the browser window, the google image doesn't seem to stay over the nose as shown in the fiddle https://jsfiddle.net/obn4yph0/embedded/result

解决方案

One idea is to position by percentage values relative to the container, rather than pixel values.

That way the positioning will be responsive, meaning that the position will be the same relative to the container regardless of the size of the container.

The calculations to convert pixels to percentages are based on this answer by peteykun.
Calculations are performed upon the stop events for both resizing and dragging.

And here's a JSFiddle (since the YouTube embed doesn't work here).

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>

这篇关于当浏览器调整大小时，不断在视频上移动可调整大小/可拖动的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！