html遮罩实现demo

遮罩的简单实现

遮罩在网页应用中是很常见的一种功能，很多刚接触的朋友都不知道怎么实现：这里给出一个简单的demo，希望可以帮助到大家。

源代码：下载1 下载2；

实现思路：就是在页面放置一个z-index很高的div。（div中不要放置任何东西），通过js，来动态的设置div的高度和宽度。然后再通过css给div设置背景色，透明度等；下面是关键代码：

在页面加入：

<div id="overlay"></div>

css代码：

/* 半透明的遮罩层 */
#overlay {background: #000;filter: alpha(opacity=50); /* IE的透明度 */opacity: 0.5;  /* 透明度 */display: none;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 100; /* 此处的图层要大于页面 */display:none;
}

js代码（基于jquery）：

//点击按钮弹出遮罩
$(function(){$("#btn1").click(function(){showOverlay();});/* 显示遮罩层 */function showOverlay() {$("#overlay").height(pageHeight());$("#overlay").width(pageWidth());// fadeTo第一个参数为速度，第二个为透明度// 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题$("#overlay").fadeTo(200, 0.5);}/* 隐藏覆盖层 */function hideOverlay() {$("#overlay").fadeOut(200);}/* 当前页面高度 */function bodyHeight() {return document.body.scrollHeight;}/* 当前页面宽度 */function bodyWidth() {return document.body.scrollWidth;}/* 当前浏览器的宽度*/function pageHeight() {return window.screen.availHeight;}/* 当前浏览器的宽度*/function pageWidth() {return window.screen.availWidth;}
}

html遮罩实现demo相关推荐

QML遮罩效果Demo
先看一下做的Demo效果: 代码: import QtQuick 2.3 import QtQuick.Window 2.2 import QtGraphicalEffects 1.0Window { ...
Bootstrap实现遮罩层
效果图如下: 1.点击打开遮罩层按钮 2.弹出一个隐藏的div 源码下载地址:http://download.csdn.net/detail/u014175572/9564824 实现代码如下: &l ...
一些上流的CSS3图片样式
译自:CSS3 Image Styles 中文:CSS3图片样式请尊重版权,转载请注明来源,多谢-- 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radiu ...
-webkit-box-reflect属性简介及元素镜像倒影实现
一.从前有只鸭子从前有只鸭子,长得不是一般的丑: 于是,鸭子一直很自卑,从来不敢照镜子,也不敢下河游泳.别的鸭子很喜欢下河游泳,因为可以一边玩耍,一边上WC,让吃进去的东西舒舒服服从后面出来:而这只 ...
html怎么设置过渡字体,web前端入门到实战：css3基础-文本与字体+转换+过渡+动画+案例...
Css3文本与字体文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: norm ...
css基础篇-倒影-阴影
一.倒影语法 box-reflect:none | <direction> <offset>? <mask-box-image> ? <direction& ...
android 图片圆角遮罩_Android 自定义View练手Demo（一）实现圆角遮罩效果
Android 自定义View系列文章 Android自定义View实现圆角遮罩效果一图胜千言,有一个遮罩就会凸显出重点区域 1-1.jpg 本文通过两种方式来实现这种效果,来达到自定义View练手 ...
loading 遮罩demo
之前项目手写loading加载ingdemo, 其中涉及图片是项目中用到, 注意: loadingBardiv需要放到页面内容最前面; 至于何时出现或者控制隐藏显示可使用js灵活控制即可. < ...
iOS自定义相机：带拍摄区域边框、半透明遮罩层、点击屏幕对焦、自动裁剪（含demo源码）
文章目录前言 I.案例1:加一个长方形的框框并裁剪身份证照片(无半透明遮罩层) 1.1 demo 源码 1.2 控制屏幕旋转方向 1.3 封装富文本API 1.4 设置相机预览层和证件框框的fram ...

html遮罩实现demo

html遮罩实现demo相关推荐

最新文章

热门文章