2条回答 默认 最新
- CSDN专家-showbo 2021-11-23 09:20关注
题主要的代码按如下。
<style> .container{position:relative;width:480px;margin:0 auto;height:240px;background:#eee} .container .blueblock{width:50px;height:50px;background:blue;position:absolute;right:0;top:50%;margin-top:-25px;display:none} .container:hover .blueblock{display:block;z-index:9} .container .blueblock .playlist{display:none;position:absolute;height:240px;background:#f00;right:0;top:0;width:80px;margin-top:-95px;z-index:999;overflow:auto} .container .blueblock .playlist a{display:block;background:#a21538;color:#fff;font-weight:bold;width:90%;margin:0 auto 10px auto;font-size:12px;line-height:30px;text-align:center;text-decoration:none} .container .blueblock:hover {background-color:yellow} .container .blueblock:hover .playlist{display:block} .container video{object-fit:cover;width:100%;height:100%} </style> <div class="container"> <div class="blueblock"> <div class="playlist"> <a href="http://demo.aspensnowmass.cn/upload/20211103/165336-0.mp4">视频1</a> <a href="http://demo.aspensnowmass.cn/upload/20211103/165336-1.mp4">视频2</a> <a href="http://demo.aspensnowmass.cn/upload/20211103/165336-2.mp4">视频3</a> </div> </div> <video src="http://demo.aspensnowmass.cn/upload/20211103/165336-0.mp4" controls></video> </div> <script> var as = document.querySelectorAll('.playlist a'); for (var i = 0; i < as.length; i++)as[i].onclick = function () { document.querySelector('.container video').src = this.href; return false; }; </script>
有帮助麻烦点下【采纳该答案】,谢谢~~
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度
- ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
- ¥15 ETLCloud 处理json多层级问题
- ¥15 matlab中使用gurobi时报错
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么