<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用jquery做遮罩</title>
    <style>
        .all{
            width:100%;
            height:500px;
            background: red;
            position: relative;
        }
        .mask {
            width:100%;
            height:500px;
            position: absolute;
            display: none;
            background:rgba(0,0,0,.5);
            z-index:1000;
        }
    </style>
</head>
<body>
    <div class="all">
        <div id="mask" class="mask"></div>
    </div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    (function(){
        $(function(){
            $(".all").click(function () {
                $("#mask").slideToggle(1000);
            });
        });
    })()
</script>
</html>
jQuery的代码一点点，是不是简单啊！！！哈哈哈

简单的用jQuery做遮罩效果的更多相关文章

  1. jquery 半透明遮罩效果 小结

    最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...

  2. 用css3过滤做遮罩效果

    <!DOCTYPE html><html ng-app="myApp" ng-controller="myController">< ...

  3. 使用Jquery做分页效果

    之前写过一个PHP 的分页效果,但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页,整理了一下,代码如下: html: <div id="containet"> ...

  4. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  5. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  6. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  7. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  8. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  9. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. JavaWeb总结(八)—EL表达式

    一.EL表达式简介 EL全名Expression Language.主要有以下作用. 1.获取数据 EL表达式主要用于替换JSP页面的脚本表达式,以及各种类型的Web域中检索Java对象.获取数据.( ...

  2. MAT（Memory Analyzer Tool）使用心得

    起因:最近在跟踪产品的性能问题,期间主要问题体现在JVM的内存回收问题,使用MAT工具进行JVM内存分析(也可对android 的应用内存分析) 问题描述: 1.部分后端服务在运行一段时间后会突然年老 ...

  3. day001-html知识点总结（二）不常见但很重要的元素汇总

    一..vertical-align:设置垂直对齐方式,主要用于: 1.单元格内容的垂直对齐 2.对于行内块级元素,如<img>,设置行内元素的基线相对于该行内块级元素的所在行的基线对齐,例 ...

  4. JVM初探之类文件结构

    java 的 .class 文件字节码如图:Class 文件是一组以8字节为基础单位的二进制流,各个数据项目有着严格的结构.下面我们介绍下class文件的结构. 魔数 class文件的头4个字节是魔数 ...

  5. 最小函数值 洛谷P2085

    题目描述:          有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个( ...

  6. Java 基础知识总结

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.数据类型:  数据类型:1>.基本数据类型:1).数值型: 1}.整型类型(byte  8位   (by ...

  7. 自行扩展 FineUIMvc 通知对话框（多个并排显示不重叠，支持最新的显示在最上方）

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 这篇文章我们将改造 FineUIMvc 默认的通知对话框,使得同时显示多个也不会重叠.并提前出一个公共的JS文件,供大家使用. ...

  8. 转账示例（三）：service层面实现（线程管理Connection）（本例采用QueryRunner来执行sql语句，数据源为C3P0）

    缺点:Service层面还是不应该出现关于事务的操作1.自行创建C3P0Uti,account数据库,导入Jar包 2.Dao层面 接口: package com.learning.dao; impo ...

  9. C++ 编译报错discards qualifiers [-fpermissive]

    声明了一个类 class Card { public: Card(const string&); int m_value; char m_suit; private: const static ...

  10. JsonResult,Controller.Json

    表示一个类,该类用于将 JSON 格式的内容发送到响应. ContentEncoding:编码格式(最好按标准utf-8) ContentType: mime类型 Data:数据设置 JsonRequ ...