网页怎么点击图片弹出视频

2024-11-25 21:45:53

1、在桌面上新建一个txt文本文件,然后命名为“点击图片打开视频”,双击打开这个txt文件。

网页怎么点击图片弹出视频

2、在打开的txt文件中输入以下代码:<!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><scripttype="text/javascript">vartestimg=document.getElementById('testimg');varvideobox=document.getElementById('videobox');varclosex=document.getElementById('closex');testimg.onclick=function(){videobox.style.display='block';}closex.onclick=function(){videobox.style.display='none';}</script></body></html>

3、将上面文件中的图片地址src地址更改为你的图片地址。

网页怎么点击图片弹出视频

4、然后将视频文件地址更改为你的视频地址。

网页怎么点击图片弹出视频

5、然后将TXT文件另存为html文件。

网页怎么点击图片弹出视频

6、在浏览器中运行这个网页文件,此时即可实现点击图片,弹出播放视频。

网页怎么点击图片弹出视频
猜你喜欢