简单遮罩层

 <style type="text/css">
        #zzc_bg
        {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.7;
            opacity: .70;
            filter: alpha(opacity=70);
        }
        #zzc_show
        {
            display: none;
            position: absolute;
            top: 38%;
            left: 45%;
            width: 53%;
            z-index: 1002;
        }
        #zzc_show span
        {
            font-size: 35px;
            font-weight: bold;
            color: White;
        }
        #zzc_show img
        {
            width: 50px;
            height: 50px;
        }
    </style>

 <div id="zzc_bg">
    </div>
    <div id="zzc_show">
        <span>98%</span>
        <img src="../images/yuya_load.gif" />
    </div>

<script type="text/javascript" language="javascript">
var zzc_div = {
        showdiv: function () {
            document.getElementById("zzc_bg").style.height = window.screen.availHeight > document.body.clientHeight ? window.screen.availHeight : document.body.clientHeight;
            document.getElementById("zzc_bg").style.display = "block";
            document.getElementById("zzc_show").style.display = "block";
        },
        hidediv: function hidediv() {
            document.getElementById("zzc_bg").style.display = ‘none‘;
            document.getElementById("zzc_show").style.display = ‘none‘;
        }
    }
</script>
时间: 2024-10-28 23:33:18

简单遮罩层的相关文章

Jquery超简单遮罩层实现代码

看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: [html] view plain copy print? <style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opa

React简单遮罩层

CSS代码 .mask{ background: rgba(0,0,0,0.4) !important; z-index: 10; height: 100vh; position: fixed; width: 100vw; } .selectMask_box{ background: rgba(0,0,0,0); transition: all .2s linear } JS代码 handleMask=()=>{ this.setState({ dateSelected: !this.state

简单的CSS3鼠标滑过图片标题和遮罩层动画特效

这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效.该鼠标滑过特效通过 CSS3transitions 和 transform 属性,在鼠标滑过图片时制作遮罩层和图片标题动画效果. 在线预览   源码下载 使用方法 HTML结构 该鼠标滑过图片特效的HTML结构非常简单:使用一个<div>元素作为图片遮罩层,在里面放置图片的描述信息. 1 2 3 4 5 6 7 8 <img src="img/01.jpg" alt=""> &

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览   源码下载 使用方法 使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester下IE8-IE10** Author:博客园小dee */ 比起使用注册页和登陆页,网站在当前页使用遮罩层注册和登陆的用户体验要好不少.这里使用jQuery和CSS实现一个简单的遮罩效果. 在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外

简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

cvi_busy_lib.js: cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.getBusyOverlay(id, overlay, busy) 为遮罩层的方法, id:需要写viewport,详情请看Js内部. overlay:主要是遮罩层的样式,遮罩层显示字体的样式. busy:加载进度圈的样式. 2.xval.settext("正在登录,请稍后......")

简单的遮罩层加登录窗效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>遮罩层加登录窗</title> <style type="text/css"> #wrap{width: 60px;height: 30px; position: absolute; text-align: center; line-height: 30px;

ios遮罩层的简单使用

/** 大图 */ - (IBAction)bigImg { //1.添加按钮遮罩层 UIButton *cover=[[UIButton alloc] init]; cover.frame=self.view.bounds; cover.backgroundColor=[UIColor blackColor]; cover.alpha=0.0; [cover addTarget:self action:@selector(smallImg) forControlEvents:UIControl

JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>DIV CSS遮罩层</title