zoukankan      html  css  js  c++  java
  • 点击弹出一个视频层,然后点击页面任何地方层隐藏,并带有遮罩层修饰

    1.HTML代码

    点击按钮:

    <span class="play_video"></span>

    弹出视频播放层:

    <div class="video" style="display:none;">
        <video class="url_video" src="__PUBLIC__/Home/video/blazblue_video.mp4" x-webkit-airplay="true" webkit-playsinline="true" poster="__PUBLIC__/Home/img/blazblue_client/m_video.png" preload="null" autoplay loop="loop" controls="controls"></video>
    </div>

    2.CSS代码

    /*遮罩层*/
    .masked{
        opacity:0.3;
        filter: alpha(opacity=30);
        background-color:#000;
    }

    3.jQuery代码

      /*弹出视频播放层*/
        $(function(){
            $(".play_video").click(function(){
                $("#fullpage div:first-of-type").addClass("masked");/*点击添加遮罩层CSS*/
                $(".video").show();
            });
            $(document).bind("click",function(e){
                var target  = $(e.target);
                if(target.closest(".play_video,.video").length == 0){/*.closest()沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。*/
                    $(".video").hide();
                    $("#fullpage div:first-of-type").removeClass("masked");/*点击其他区域隐藏遮罩层CSS*/
                };
                e.stopPropagation();
            })
        });
  • 相关阅读:
    SpringBoot打包 jar文件太小 无jar
    公共dns
    SpringBoot解决跨域问题
    git学习-来自慕课网
    SpringBoot Value 'xxx' is not a valid duration
    Maven生成项目
    github-自我使用-滑稽
    jsonp示列
    mysqldump 备份和恢复整理
    myql二进制日志
  • 原文地址:https://www.cnblogs.com/wenzheshen/p/5818543.html
Copyright © 2011-2022 走看看