标签:rgba 节点 osi auto -- 按钮 radius element ide
1,HTML及 JS 代码
<!-- 视频播放 --> <div class="video home_video"> <div class="videolist" vpath="video/1.mp4" ipath="video/6.mp4"><img src="common/images/theme/default/video_icon.png"></div> </div> <div class="videos"> </div> <script type="text/javascript"> $(‘.videolist‘).each(function() { //遍历视频列表 $(this).hover(function() { //鼠标移上来后显示播放按钮 $(this).find(‘.videoed‘).show(); }, function() { $(this).find(‘.videoed‘).hide(); }); $(this).click(function() { //这个视频被点击后执行 var img = $(this).attr(‘vpath‘); //获取视频预览图 var video = $(this).attr(‘ipath‘); //获取视频路径 $(‘.videos‘).html("<video id=\"video\" poster=‘" + img + "‘ style=‘width: 100%; height:100%‘ src=‘" + video + "‘ preload=\"auto\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"product/gb.png\" width=\"25\" height=\"25\">"); $(‘.videos‘).show(); }); }); function close1() { var v = document.getElementById(‘video‘); //获取视频节点 $(‘.videos‘).hide(); //点击关闭按钮关闭暂停视频 v.pause(); $(‘.videos‘).html(); } </script>
2,CSS代码
.videolist { position: relative; float: left; } .videolist:hover { cursor: pointer; } .videos { display: none; background: #000; position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; } .vclose { position: absolute; right: 1%; top: 1%; border-radius: 100%; cursor: pointer; } .home_video { position: fixed; top: 40px; left: 40px; float: inherit; }
标签:rgba 节点 osi auto -- 按钮 radius element ide
原文地址:https://www.cnblogs.com/eliteboy/p/14484668.html