zoukankan      html  css  js  c++  java
  • 使用css borer实现图层蒙版效果

    需要js

    思路:假设目标元素是target。在外层定义元素宽高等于target,通过border设置元素铺满整个文档,设置border的透明图,实现蒙版,在元素的内部设置子元素,宽高100%;设置圆角边框50%; 设置box-shadow inset显示

    代码:

    <span class="demo3">我的信息</span>
    <div class="cover"></div>

    css

    .cover{
                position:absolute;
                border: 0 solid #000;
                left:0;
                top:0;
                right:0;
                bottom:0;
                opacity: 0.75;
                overflow: hidden;
                display: none;//防止页面闪现大圆,在设置完元素的样式之后再显示
    
            }
            .cover::before{
                content:"";
                width:100%;
                position: absolute;
                height:100%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                border:400px solid #000;
                left:-400px;
                top:-400px;
                box-shadow: 0 0 0 100px #000;
            }

    js代码:

    $(document).ready(function(){
            var w_w=$(document).width();//获取文档的宽度
            var w_h=$(document).height();//获取文档的高度
            var s_l=$(document).scrollLeft();//获取窗口左边滚动的距离
            var s_t=$(document).scrollTop();//获取窗口顶部滚动的距离
            var t_w=$(".demo3").width();//获取目标元素的宽度
            var t_h=$(".demo3").height();//获取目标元素的高度
            var o_l=$(".demo3").offset().left;//获取目标元素相对于当前窗口左边的距离
            var o_t=$(".demo3").offset().top;//获取目标元素距离当前窗口上部的距离
    //设置蒙版元素的border $(
    ".cover").show().css({"width":t_w+"px","height":t_h+"px","border-top-width":s_t+o_t+"px","border-right-width":(w_w-o_l-s_l-t_w)+"px","border-bottom-width":(w_h-s_t-o_t-t_h)+"px","border-left-width":o_l+s_l+"px"}); //border-top-width:目标元素距离当前窗口上部的距离+窗口顶部滚动的距离
     //border-right-width:文档的宽度-目标元素距离当前窗口左边的距离-窗口左边滚动的距离-目标元素的宽度
     //border-bottom-width:文档的高度-目标元素距离当前窗口上部的距离-窗口顶部滚动的距离-目标元素的高度
     //border-left-width:目标元素距离当前窗口左边的距离+窗口左边滚动的距离
    });

    来自:http://www.zhangxinxu.com/wordpress/2016/03/better-black-mask-guide-overlay-method/

  • 相关阅读:
    windows中dos命令指南
    HDU 2084 数塔 (dp)
    HDU 1176 免费馅饼 (dp)
    HDU 1004 Let the Balloon Rise (map)
    变态杀人狂 (数学)
    HDU 2717 Catch That Cow (深搜)
    HDU 1234 开门人和关门人 (模拟)
    HDU 1070 Milk (模拟)
    HDU 1175 连连看 (深搜+剪枝)
    HDU 1159 Common Subsequence (dp)
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6201470.html
Copyright © 2011-2022 走看看