局部遮罩 shade（二）

最新推荐文章于 2024-08-30 20:29:15 发布

weixin_30387663

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/QLJ1314/archive/2012/08/04/dom-shade.html

版权

其实它和全局遮罩是一样的思想，只不过就要用position了

<script type="text/javascript">
    function shade(){
     var p = document.getElementById("shade");
     p.className = "d";
     p.style.display = "block";

    
    }
    function shadeDisplay(){
     var p = document.getElementById("shade");
     p.style.display = "none";
    
    }
</script>
<style type="text/css">
    #s{
        width:600px;
        height:500px;
        margin:0px auto;
        z-index:999;
        position:relative;/*使子元素的坐标以父元素的左上角坐标为远点(0,0)*/
        border:1px solid #000;

    }
    .d{
        width:600px;
        height:500px;
        position:absolute;
        left:0px;
        top:0px;
        background-color:green;
        -moz-opacity:0.5;/*Firefox*/
        opacity:0.5;/*Opera*/
        filter:alpha(opacity=50); /*IE*/
    
    }
</style>
</head>

<body>
    <div id="s">
        <a href="javascript:shade()">shade局部遮罩</a>
        <div id="shade"></div>
    </div>
    <a href="javascript:shadeDisplay()">shade遮罩消失</a>
</body>

转载于:https://www.cnblogs.com/QLJ1314/archive/2012/08/04/dom-shade.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30387663

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
局部遮罩 shade（二）

其实它和全局遮罩是一样的思想，只不过就要用position了<script type="text/javascript"> function shade(){ var p = document.getElementById("shade"); p.className = "d"; p.style.display = "block";...
复制链接

扫一扫