在调整浏览器大小时,不断地在video上移动可resize/可拖动的图像
我正在研究这个小提琴 , 当浏览器resize时 ,我想在video上不断地移动/调整图像大小(它本身可resize/可拖动图像) 。
我使用的HTML / CSS / JS代码片段是:
HTML:
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代码中做出哪些更改,以便每当我调整浏览器大小时,可拖动/可resize的图像也应该不断移动 。
例如:让我们假设我将谷歌图像放在一个人的鼻子上全屏幕 ,如果我调整浏览器窗口大小, 谷歌图像似乎不会停留在鼻子上 ,如小提琴https:// jsfiddle所示达网络/ obn4yph0 /嵌入/结果
一种想法是相对于容器的百分比值而不是像素值。
这样,定位将是响应的,这意味着无论容器的大小如何,相对于容器的位置都是相同的。
将像素转换为百分比的计算基于peteykun的 这个答案 。
对resize和拖动的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; }