觸發onload並一起調整大小？

我有一個視頻元素，其位置由瀏覽器的寬度和高度決定。它包裹在下面的resize()函數中。基本上，當我調整瀏覽器的大小時，位置會發生變化，以便瀏覽器專注於視頻的中心。觸發onload並一起調整大小？

我試圖讓這個功能立即運行時，頁面加載和當瀏覽器大小。無論負載和調整工作，當我跑我的網頁在本地，但實時推送時，該功能將無法負載啓動，但是當我調整將僅..

它也非常不一致。有時候這個函數會在加載時觸發，有時它不會。

var resize = function(){ 
    var videoWidth = (window.innerWidth - video.offsetWidth)/2; 
    var videoHeight = (window.innerHeight - video.offsetHeight)/2; 
    video.style.transform = "translateY(" + videoHeight + "px)"; 
    video.style.transform = "translateX(" + videoWidth + "px)"; 
} 

window.addEventListener("load", function(){ 
    resize(); 
}); 

window.addEventListener("resize", function(){ 
    resize(); 
});

來源

2017-02-22 giantqtipz

只是爲了檢查，是函數沒有被調用或者是事件不是被解僱？ –

嘿！這是我的問題的截圖。我相信這是不會觸發的事件imgur.com/a/myUC8。第一張圖片顯示了該功能在加載時未觸發時頁面的顯示方式。但是，如果我調整瀏覽器的大小，它會重新調整自己，使其看起來像第二個圖像。但是，有時函數做火負荷 - 它只是不一致...... – giantqtipz

我不知道你的代碼的其餘部分有多大，但它看起來對我來說，有時在頁面加載後加入負載事件監聽器，因此它不會觸發，這也會導致隨機性，因爲它有時加載速度足以在頁面完成加載之前添加事件偵聽器。該代碼是否在單獨的JS文件中？我建議儘可能地添加這個，並給出一個去。 –

我建議你兩種不同的方式來實現，沒有JavaScript。

1.第一溶液（無邊緣處的陰影）

HTML

<div id="videoWrapper"> 
    <video ... ></video> 
</div>

CSS

#videoWrapper { 
    position: relative; 
    width: 100%; 
} 

#videoWrapper video { 
    position: absolute; 
    left: 50%; 
    transfrom: translateX(-50%); 
}

您的視頻可以改變其高度或寬度，它將始終以包裝爲中心！：d

1.第二溶液（用邊緣處的陰影）

HTML

<div id="videoWrapper"> 
    <div class="shadowBlock"> 
    </div> 
    <div id="video"> 
    </div> 
    <div class="shadowBlock"> 
    </div> 
</div>

CSS

#videoWrapper { 
    display: flex; 
    flex-direction: row 
} 

.shadowBlock { 
    z-index: 5; 
    display: flex; 
    background-color: black; 
    flex: 1; 
    -webkit-box-shadow: 0px 0px 100px 24px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 100px 24px rgba(0,0,0,0.75); 
    box-shadow: 0px 0px 100px 24px rgba(0,0,0,0.75); 
} 

#video { 
    z-index: 4; 
    display: flex; 
}

在這裏你可以看到它的工作好：https://jsfiddle.net/et2xrsj5/

來源

2017-02-22 16:07:39 Kornflexx

我試圖複製與batmanvsuperman.com相同的效果（檢查視頻和窗簾，當瀏覽器尺寸發生變化時，您會看到屬性變化）。當我調整瀏覽器大小時，我會在視頻的兩側使用空白divs，需要跟隨視頻邊緣的「人造」窗簾。我的意思是這是一個實踐項目，這就是爲什麼我願意爲了學習而做更復雜的方法:) – giantqtipz

最簡單的方法往往是最好的方法！：D一個好的程序員保持簡單。我看着你的鏈接，我不明白什麼阻止你使用我的技術。你能提供一個截圖或模式嗎？ – Kornflexx

哈哈謝謝：D這裏有一些截圖http://imgur.com/a/myUC8。第一個圖像是它在函數不運行時的顯示方式。第二個圖像是它應該如何運行。一切都以視頻邊緣的薄窗簾爲中心。它將在瀏覽器調整大小後跟隨視頻。道具如果你能猜到視頻來自哪裏！ – giantqtipz

觸發onload並一起調整大小？

回答

相關問題