精华内容
下载资源
问答
  • CSS遮罩层mask css制作遮罩层mask.zip
  • 遮罩层听起来貌似很复杂,其实说白了就是一个全界面的半透明的div,用户不可以点击下边的元素,或者说是点击没有反应,接下来通过本文给大家介绍JavaScript如何制作遮罩层对话框,对js遮罩层相关知识感兴趣的朋友...
  • 主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下
  • Flash动画制作之—制作遮罩层动画.ppt
  • 纯css制作遮罩层特效

    千次阅读 2017-10-11 12:30:41
    下面是用纯css制作遮罩层效果:原始页面,放了三张图片:鼠标滑过第一张图片:瞬间加上遮罩层鼠标滑过第二张图片:遮罩层缓慢下拉下来鼠标滑过第三张图片:遮罩层缓慢的从中心位置旋转变大完整代码如下: ...

    css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做。下面是用纯css制作的遮罩层效果:

    原始页面,放了三张图片:

    ![原始图片](https://img-blog.csdnimg.cn/img_convert/3a2f098e4239db96ba5fb00f711370b2.png)

    鼠标滑过第一张图片:瞬间加上遮罩层

    ![第一张图片](https://img-blog.csdnimg.cn/img_convert/52b865bfb6c19aa3cce710c5e64f81e0.png)

    鼠标滑过第二张图片:遮罩层缓慢下拉下来

    ![第二张图片](https://img-blog.csdnimg.cn/img_convert/4bc6421be6f447a9d241b0230987e054.png)

    鼠标滑过第三张图片:遮罩层缓慢的从中心位置旋转变大

    ![第三张图片](https://img-blog.csdnimg.cn/img_convert/669217de937ee2ccaf60405d33ef837b.png)

    除了以上遮罩层的效果外,还可以配合css3的其他过渡效果、动画效果来完成更多复杂却很有趣的特效。

    例子中完整代码如下:

    ``` 遮罩层
    ```
    展开全文
  • 移动端遮罩层js

    2017-10-24 14:43:08
    用于移动端调用后台时,重复提交问题, 写出加载圈圈以及遮罩层
  • //由中间向周围渐渐出现 <!DOCTYPE html>    <title>transition由小变大    *{padding:0;margin:0;... 遮罩层1 ... 遮罩层2 ... 遮罩层3      文字4  遮罩层4     </html>

    //由中间向周围渐渐出现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>transition由小变大</title>
        <style>
            *{padding:0;margin:0;}
            ul{list-style: none}
            .list{width:500px;height:500px;margin:20px auto;border:1px solid #000;}
            .list li{float:left;margin:0 10px;}
            .list li>a{display:block;width:100px;height:100px;background:red;}
            .list li span{display:block;background:rgba(0,255,215,.3);
                width:10px;
                height:10px;
                margin:-55px 0 0 45px;
                opacity:0;
                font-size:2px;
            }
            .list li:hover span{
                opacity:1;
                transform:scale(10);
                transform-origin:center center;
                transition:transform 0.2s linear;
                -webkit-transition:transform 0.2s linear;
                color:#fff;
            }
        </style>
    </head>
    <body>
        <ul class="list">
            <li>
                <a href="#">文字1</a>
                <span class="font">12px</span>
            </li>
            <li>
                <a href="#">文字2</a>
                <span>12px</span>
            </li>
            <li>
                <a href="#">文字3</a>
                <span>12px</span>
                
            </li>
            <li>
                <a href="#">文字4</a>
                <span>12px</span>
            </li>
        </ul>
    </body>
        <script>
        // window.οnlοad=function(){
        //     var font=document.getElementsByClassName("font");
        //     var list=document.getElementsByTagName("li");
        //     list[0].οnmοuseοver=function(){
        //         font[0].innerHTML="12px"
        //         font[0].style.transition="none"
        //     }

        // }
        </script>
    </html>

    //由上向下出现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>transition</title>
        <style>
            *{padding:0;margin:0;}
            ul{list-style: none}
            .list{width:500px;height:500px;margin:20px auto;border:1px solid #000;}
            .list li{/*position:relative;*/float:left;margin:0 10px;
                overflow: hidden;
            }
            .list li a{display:block;width:100px;height:100px;background:red;}
            .list li span{display:block;background:rgba(0,255,215,.3);/*position: absolute;left:0;top:0;*/
                transform:translateY(-200px);
                text-align:center;
                line-height:100px;
                width:100px;
                height:100px;
                
            }
            .list li:hover span{
                transform:translateY(-100px);
                -webkit-transition:transform 0.2s linear;

            }
        </style>
    </head>
    <body>
        <ul class="list">
            <li>
                <a href="#">文字1</a>
                <span>遮罩层1</span>
            </li>
            <li>
                <a href="#">文字2</a>
                <span>遮罩层2</span>
            </li>
            <li>
                <a href="#">文字3</a>
                <span>遮罩层3</span>
            </li>
            <li>
                <a href="#">文字4</a>
                <span>遮罩层4</span>
            </li>
        </ul>
    </body>
    </html>

    展开全文
  • 制作遮罩层的样式

    2020-06-17 10:50:43
    遮罩层的样式 <div class="content"> 11111 <div class="mark"></div> </div> .content { width: 100px; height: 100px; background: #fff; border: 1px solid red; position: ...

    遮罩层的样式

    <div class="content">
      11111
      <div class="mark"></div>
    </div>
    
    .content {
      width: 100px;
      height: 100px;
      background: #fff;
      border: 1px solid red;
      position: relative;
    }
    .mark {
      width: 100%;
      height: 100%;
      position: absolute;
      background: rgba(0, 0, 0, 0.2);
      top: 0;
      left: 0;
      z-index: 100;
      cursor: pointer;
      transition: all 0.15s;
    }
    .mark:hover {
      background: rgba(0, 0, 0, 0.6);
    }
    
    展开全文
  • js制作遮罩层详解

    2021-05-23 22:48:59
    遮罩层制作

    遮罩层的作用:

      1.首先我们要明白,遮罩层的作用就是将指定区域覆盖,使其失去原有的功能(如: 点击事件,移入移出效果)。

    遮罩层的原理

      在指定区域加上一个半透明的蒙版,也可以再在蒙版上面再加一个你想要实现的效果。一般通过定位(position) ,使用层级(z-index)来实现遮罩层的效果。

    遮罩层相关代码演示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html,body{
                width: 100%;
                height: 100%;
            }
            .div1{
                width: 200px;
                height: 200px;
                background-color: antiquewhite;
            }
            .div2{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            .mask{
                width: 100%;
                height: 100%;
                background-color: black;
                position: absolute;
                opacity: 0.3;
                left: 0;
                top: 0;
                z-index: 1;
                display: none;
    
            }
            button{
                width: 300px;
                height: 100px;
                font-size: 20px;
                line-height: 100px;
                text-align: center ;
    
            }
            .close{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                display: none;
                z-index:10;
            }
        </style>
    </head>
    <body>
        <button class="open">点击启用遮罩层</button>
        <button class="close">点击关闭遮罩层</button>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
    <div class="mask"></div>
    <script>
        var div1=document.getElementsByClassName("div1")[0]
        var div2=document.querySelector(".div2");
        div1.addEventListener("mouseover",function(){this.style.backgroundColor='red'})
        div1.addEventListener("mouseout",function(){this.style.backgroundColor='antiquewhite'})
        div2.addEventListener("mouseover",function(){this.style.backgroundColor='blue'})
        div2.addEventListener("mouseout",function(){this.style.backgroundColor='aqua'})
        //遮罩层mask
        var mask=document.querySelector(".mask");
        var open=document.querySelector(".open")
        var close=document.querySelector(".close")
        open.onclick=function(){
            mask.style.display='block'
            close.style.display="block"
        }
        close.onclick=function(){
            mask.style.display='none'
            close.style.display='none'
        }
      
    </script>
    </html>
    

    分析:

      1.在不启用遮罩层的情况下,下面的两个方块可以通过触发事件来实现移入移出来改变颜色
      2.启用遮罩层后,这两个方块的事件将不会再被触发,因为遮罩层(mask)在上方将其覆盖(之所以看得见,是因为将透明度opacity设为原来的30%)
      3.遮罩层上方的按钮之所以没有被覆盖,是因为通过定位,将层级(z-index)提升到比遮罩层高,所以遮罩层无法将其覆盖,原有的功能(点击事件)依然能够触发。

    效果演示

    在这里插入图片描述
    觉得对你有帮助,点个赞再走吧!

    展开全文
  • 在网页上经常遇到需要等待很久的操作,比如导出报表等... * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic = true; if (Objec
  • 遮罩动画的使用技巧:新建元件---影片剪辑---命名为变形遮罩.确定.在影片剪辑的编辑区中,点图层1的第一祯.点矩形工具画一个无笔触色,大小为550*400的矩形......
  • html5+css3 弹出遮罩层

    2017-09-22 16:50:15
    这是一款使用html5 svg和css3制作的全屏遮罩导航菜单,这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕,可以说大小是以你的浏览器为准。默认是绿色背景,你完全可以换成其它颜色,这个不用我细说了吧。 请在现代...
  • 应用移动H5领域。CSS3 实现Loading加载,页面遮罩层的应用。
  • 设置遮罩层于上边距离 newMask.style.left = " 0px " ; // 设置遮罩层左边距离 newMask.style.background = " gray " ; // #33393C//遮罩层背景色 newMask.style.filter = " alpha(opacity=40) " ...
  • jsp页面加载之遮罩层

    2019-04-22 01:30:28
    NULL 博文链接:https://2814704901.iteye.com/blog/1955402
  • 遮罩演练</title><link href=”../css/component2.css” rel=”Stylesheet”/>[removed][removed][removed][removed]</head><body>”left-container> <ul class=”top
  • 制作flash遮罩层动画说课稿 方正县第一中学 苏志新 一说教材 1教材的地位和作用 遮罩是Flash图层中的一个重要概念这一技巧在动画制作过程中的应用也是相当广泛的对学生而言学好这一技巧对他今后的动画设计道路起到了...
  • 包含两个页面和一张百度网址的二维码图片,index-flex.html展示的是flex布局绝对居中写法和遮罩层点击空白处关闭的方法一。index-transform.html展示的是利用transform属性偏移进行绝对居中和遮罩层点击空白处关闭的...
  • 学校作业。。。今晚交 检查时发现了这个问题,找网上各种方法依然没用 地址:http://www-student.it.uts.edu.au/~... 另外求解include怎么用,咱想把右下角那个按钮变成全页面通用的,但是现在只能每个页面做一次
  • 因此必须要使用一个效果:jquery遮罩层。利用明暗效果来突出当前用户的操作。 代码如下:$(function() {var $oe_menu= $(‘#oe_menu’);var $oe_menu_items= $oe_menu.children(‘li’);var $oe_overlay= $(‘#oe_...
  • 利用div+css制作弹出层并遮罩层,主用用了两个div,一个div用于弹出框,另一个则遮罩整个页面
  • <template> <div class="homeCom maxCom"> <div class="content-djnr"> <h3 class="content-title"> 医院对接内容 </h3>... v-for="(item, index) in djLis...
  • jQuery点击弹出步骤遮罩层窗口代码基于jquery.1.7.1.min.js制作,操作窗口,操作步骤代码,点击上一步、下一步显示不同内容。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,695
精华内容 1,878
关键字:

如何制作遮罩层