点击图片弹出视频
发布网友
发布时间：2022-04-22 22:59
共1个回答
热心网友
时间：2023-06-23 11:05
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="testimg" src="#" alt="测试图片" width="100px" height="100px" style="cursor: pointer">
<div id="videobox" style="width: 500px; height: 500px; border: 1px solid #ddd; position: fixed; top: 50%; margin-top: -250px; left: 50%; margin-left: -250px; z-index: 999; display: none">
<span id="closex" style="position: absolute; right: 0; top: 0; z-index: 1000; display: block; width: 20px; line-height: 20px; text-align: center; cursor: pointer">x</span>
<video id="video" width="500px" height="500px" src="#"></video>
</div>
<script type="text/javascript">
var testimg = document.getElementById('testimg');
var videobox = document.getElementById('videobox');
var closex = document.getElementById('closex');
testimg.onclick = function()
{
videobox.style.display = 'block';
}
closex.onclick = function()
{
videobox.style.display = 'none';
}
</script>
</body>
</html>
已经写得很明显了，自己照这个去改
来自：求助得到的回答