<!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. Ubuntu 12.4 server 安装 redmine

    1,安装默认的redmine apt-get install apache2 libapache2-mod-passenger mysql-server redmine redmine-mysql 直 ...

  2. GET 请求复制转发一直等待响应的问题 Transfer-Encoding: chunked

    今天在做Proxy 转发请求的时候发现 GET的请求转发时一直在等待输出. 而Post等其它操作是可以的. 同事告诉我一般一直等待响应可能是输出内容长度和头部ContentLength不一致导致的, ...

  3. 通过修改CoreCLR中的ClrHost实现自托管程序

    上一篇我们讲了如何在windows和Linux上编译CoreClr的问题 虽然文章使用的是windows 10 (Bash)环境,但是也可以做为ubuntu环境的参考. 成功编译CoreCLR的源代码 ...

  4. 【PAT_Basic日记】1001. 害死人不偿命的(3n+1)猜想

    还是觉得代码放这靠谱,会定期的看看和优化代码 #include <stdio.h> #include <stdlib.h> int main() { int n; int co ...

  5. Ajax (AppServ服务器练习)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. C#代码将html样式文件转为Word文档

    首先有个这样的需求,将以下网页内容下载为Word文件. html代码: <div class="modal-body">    <div style=" ...

  7. openresty源码剖析——lua代码的加载

    ##Openresty是什么 OpenResty是一个基于 Nginx 与 Lua 的高性能 Web 平台,通过把lua嵌入到Nginx中,使得我们可以用轻巧的lua语言进行nginx的相关开发,处理 ...

  8. Activiti引擎启动失败

    今天部署项目测试时发现activiti启动失败,研究了会才把问题解决!! 错误信息:SEVERE: problem during schema create, statement create seq ...

  9. 【lucene系列学习四】使用IKAnalyzer分词器实现敏感词和停用词过滤

    Lucene自带的中文分词器SmartChineseAnalyzer不太好扩展,于是我用了IKAnalyzer来进行敏感词和停用词的过滤. 首先,下载IKAnalyzer,我下载了 然后,由于IKAn ...

  10. 蓝桥杯-手机尾号-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...