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 屏幕可视范围跟随目标物体移动,可修改可视范围大小,边缘渐变大小.以及遮罩颜色, ...
随机推荐
- CSS——几个最新解决方案
一.重置默认样式 normalize.css ①不像其他CSSreset,它保存了一些有用的默认样式. ②规范了大量样式,纠正了一下bug与表现形式. ③有详细的注释解释代码的作用. 二.清除浮动 / ...
- PHP面向对象(分页)
<?php class page { var $table; var $pagesize; var $totalsize; var $totalp ...
- 封装对NPOIExcel的操作,方便的设置导出Excel的样式
下载: http://pan.baidu.com/s/1boTpT5l 使用方法: 导入: 使用 ReadToDataTable方法 导出: NPOIExcel.ExcelManager manger ...
- 20160113 JS中CheckBox如何控制全选
//判断CheckBoxzong他的点击事件 $("#CheckBoxzong").click(function () { //取出所有class为选中的集合 var query ...
- 解决Selenium Webdriver执行测试时,每个测试方法都打开一个浏览器窗口的问题
虽然把WebDriver定义为一个静态变量了,但是每次执行测试都要打开多个窗口,挺浪费时间的. 找了很多中方法,比如使用setUpClass, BeforeSuite都没有完全解决问题.后来无意间发现 ...
- StackExchange.Redis.Extensions.Core 源码解读之 Configuration用法
前言 之前接触到Redis,然后选用了对StackExchange.Redis又一层封装的StackExchange.Redis.Extensions.Core类库.阅读源代码的过程中发现了他使用Co ...
- c#深拷贝
/// <summary> /// 对象拷贝 /// </summary> /// <param name="obj">被复制对象</pa ...
- Js 扩展
计算字符串的字节长度 String.prototype.len = function () { return this.replace(/[^\x00-\xff]/g, 'xx').length; } ...
- 写CSS的布局
刚写页面的时候写CSS觉得一个选择器中的每个声明分别占一行看起来舒服些,但随着页面大了,写的东西多了,看起来就很乱了.所以每个声明连着写其实更加好些
- STL之迭代器(iterator)
STL的中心思想在于:将数据容器和算法分开,彼此独立设计,最后再用一帖粘着剂将它们撮合在一起.没错,这个粘着剂正是迭代器(iterator).迭代器的主要目的是通过遍历来对容器中元素进行相关操作.算法 ...