jQuery 屏幕遮罩
1.先做一个可以覆盖整个屏幕的div,颜色为黑色,然后再设置透明度,作为遮罩
#zhezhao {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.1;//以下三项是各种浏览器的透明度,可进行更改
filter: alpha(opacity=10);
-moz-opacity: 0.1;
display: none;//一上来默认是隐藏的,通过js事件进行显示隐藏
z-index:;//遮罩要高于所有的,给他设置一个大一点的值,但是如果弹窗遮罩,弹窗要高于遮罩,把弹窗的z-index属性设置大于遮罩即可
}
2.在JQuery事件中设置遮罩的显示与隐藏
$(document).ready(function () {
$("#btn1").click(function () {
var hig_body = $('body').outerHeight();//获取body的高度
var hig_ex = window.innerHeight;//获取浏览器高度
if (hig_body < hig_ex) {
hig_body = hig_ex;
}
$("#zhezhao").css('display', 'block').css('height',hig_body);
jQuery 屏幕遮罩的更多相关文章
- 简单的用jQuery做遮罩效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- jQuery实现遮罩层
1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jquery 半透明遮罩效果 小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
- jquery blockui 遮罩
参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...
- Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...
- jquery动画遮罩
以前一直以为遮罩都是鼠标移上去,改变透明度实现的,后来看到过这样的一个遮罩动画,然后今天自己写了一个,因为弹出的遮罩是圆形的,所以从美观上来说,这个遮罩效果更适合于方形图片. <div clas ...
- jquery blockui 遮罩【转】
参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...
- [Unity3D]Shader编程之动态屏幕遮罩
转载 https://blog.csdn.net/u012741077/article/details/78425834 屏幕可视范围跟随目标物体移动,可修改可视范围大小,边缘渐变大小.以及遮罩颜色, ...
随机推荐
- CC3000 SPI接口编程介绍
CC3000 SPI 操作: CC3000的SPI 是基于五根线CLCK,CSn,IRQ,MISO,MOSI:通信模式如下图: CLCK:时钟频率0-26M从主机到从机,提供SPI接口时钟 CSn:低 ...
- MSP430学习笔记:UART
串通可以两种方法其现 一.USART硬件直接实现 二.通过定时器软件实现 该模块可现现: UART异步串行通讯 SPI同步串行通讯 I2C同步串行通讯 UxCTL控制寄存器 7:PENA 6:PEV ...
- tar
必要参数有如下: -A 新增压缩文件到已存在的压缩 -B 设置区块大小 -c 建立新的压缩文件 -d 记录文件的差别 -r 添加文件到已经压缩的文件 -u 添加改变了和现有的文件到已经存在的压缩文件 ...
- Android 后端 Bmob的使用
网上发现一个很不错的东西Bmob,推荐给大家使用. Bmob可以开发一个云存储的移动应用软件,给应用软件快速添加一个安全灵活的后台管理系统,方便浏览终端保存的各种信息. 如果觉得创建服务器程序比较麻烦 ...
- 安装thrift全过程
为了研究基于thrift的RPC框架,其实,是想自己基于thrift写一个微服务的platform.首先就是安装Thrift,便于IDL架构生成java的接口文件.多的不说了,开始install的过程 ...
- fedora 配置
静态ip配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 [root@localhost network-scripts]# cat ifcfg-ens ...
- ADF_Starting系列9_使用EJB/JPA/JSF通过ADF构建Web应用程序之测试J2EE Container
2013-05-01 Created By BaoXinjian
- [MySQL] 关系型数据库的设计范式 1NF 2NF 3NF BCNF
一.缘由: 要做好DBA,就要更好地理解数据库设计范式.数据库范式总结概览: 为了更好地理解数据库的设计范式,这里借用一下知乎刘慰老师的解释,很通俗易懂.非常感谢! 二.具体说明: 首先要明白”范 ...
- [家里蹲大学数学杂志]第056期Tikhonov 泛函的变分
设 $\scrX$, $\scrY$ 是 Hilbert 空间, $T\in \scrL(\scrX,\scrY)$, $y_0\in\scrY$, $\alpha>0$. 则 Tikhonov ...
- linux shell中的&& || 和()
1. linux命令返回值介绍 shell 在执行某个命令时,会有一个返回值,该值保存在shell变量$?中.当$?为0时,表示命令执行成功:当$?为1时,表示命令执行失败. 2. && ...