点击图片弹出视频

发布网友发布时间：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>

已经写得很明显了，自己照这个去改

来自：求助得到的回答