div中的视频播放完隐藏盒子
时间: 2024-03-23 18:40:19 浏览: 19
您可以使用JavaScript来实现这个功能。当视频播放完成时,将隐藏盒子的display属性设置为none即可。
以下是示例代码:
```html
<div id="video-container">
<video src="video.mp4" id="video-player"></video>
</div>
<div id="hidden-box">
这是隐藏的盒子
</div>
<script>
var video = document.getElementById('video-player');
var hiddenBox = document.getElementById('hidden-box');
video.addEventListener('ended', function() {
hiddenBox.style.display = 'none';
});
</script>
```
在这个示例中,我们首先获取视频元素和隐藏盒子元素。然后,我们添加了一个事件监听器来侦听视频完成事件。当视频完成时,我们将隐藏盒子的display属性设置为none,从而将其隐藏。
相关问题
div盒子的显示隐藏切换效果
你可以通过添加和移除 CSS 类来实现 div 盒子的显示隐藏切换效果。具体来说,你可以在 CSS 中定义一个类,比如 `.hidden`,将其设置为 `display: none;`,表示隐藏该元素。然后,当你想要隐藏该元素时,只需将该元素的类设置为 `.hidden`。当你想要显示该元素时,只需将该元素的类移除即可。
下面是一个简单的示例:
HTML 代码:
```html
<div id="myDiv">这是一个 div 盒子</div>
<button id="toggleBtn">切换显示/隐藏</button>
```
CSS 代码:
```css
.hidden {
display: none;
}
```
JavaScript 代码:
```javascript
const myDiv = document.getElementById('myDiv');
const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.addEventListener('click', () => {
myDiv.classList.toggle('hidden');
});
```
在上面的示例中,我们首先获取了要操作的 div 元素和一个触发切换的按钮。然后,我们在按钮上添加了一个点击事件监听器,每次点击按钮时,会将 div 元素的 `.hidden` 类进行切换,从而实现显示/隐藏的切换效果。
css的div盒子在div中居中
以下是一种使用CSS将子div在父div中垂直水平居中的方法:
```html
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
<style>
.container {
height: 300px;
width: 300px;
border: 1px solid black;
background-color: aliceblue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box {
width: 120px;
height: 120px;
background: #55a9ff;
display: inline-block; margin: 0 auto;
vertical-align: middle;
}
</style>
```
其中,父div的display属性设置为table-cell,使其表现为表格单元格,然后使用vertical-align属性将子div垂直居中。子div的display属性设置为inline-block,使其表现为行内元素,然后使用margin属性将其水平居中。