我正在開發一個視頻播放器,該視頻播放器可將視頻啓動到div覆蓋內的iframe中。我想避免在每個鏈接中使用onclick =()等重複代碼,並且希望避免使用jQuery等外部庫,因爲當我的視頻窗口啓動時,jQuery會產生令人不快的閃爍屏幕。show hide div class name純文字javascript
我的問題是,到目前爲止,我的工作只有第一個鏈接打開視頻覆蓋。我(有點)明白,[0]表示數組中的第一個元素。數組是否可以包含無限的數值範圍,還是有更好的方法來完成我的目標?這些畫廊中可能會有成千上萬的視頻,因此在我的腳本中一次列出它們並不實際。
我還在努力學習,所以一個工作示例將不勝感激。由於
我的工作至今
https://jsfiddle.net/4oomb9rt/
示例代碼
<!doctype html>
<html>
<head>
<title>Video Overlay</title>
<style>
body {
margin: 0;
font-family: arial;
}
#vidPlayer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000;
overflow: hidden;
transition: 0.5s;
display: none;
color: white;
}
.closebtn {
position: absolute;
top: 7px;
right: 7px;
font-size: 50px;
}
.openbtn {
font-size: 30px;
}
.openbtn, .closebtn {
max-height: 48px;
max-width: 48px;
min-height: 48px;
min-width: 48px;
border-radius: 7px;
line-height: 12px;
}
.vidContent {
width: 100%;
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="vidPlayer">
<button class="closebtn">×</button>
<div class="vidContent">vidplayer content</div>
</div>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<script>
function openNav() {
document.getElementById("vidPlayer").style.display = "block";
}
function closeNav() {
document.getElementById("vidPlayer").style.display = "none";
}
var opener = document.getElementsByClassName('openbtn')[0];
opener.addEventListener("click", function(e) {
openNav();
}, false);
var closer = document.getElementsByClassName('closebtn')[0];
closer.addEventListener("click", function(e) {
closeNav();
}, false);
</script>
</body>
</html>
謝謝大家的努力幫助我明白了。特別感謝Mohd的工作示例 –