<!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. TabBar自定义方式(一)

    1.思路:创建一个继承UIView的TabBar类,并将需要的item添加到TabBar上面去,并用代理来处理相应的时间 [self.view bringSubviewToFront:self.one ...

  2. 03 Types of Learning

    学习的分类: 根据输出空间Y:分类(二分类.多分类).回归.结构化(监督学习+输出空间有结构): 根据标签y:监督学习.无监督学习(聚类.密度估计.异常点检测).半监督学习(标注成本高时).强化学习: ...

  3. R语言各种假设检验实例整理（常用）

    一.正态分布参数检验 例1. 某种原件的寿命X(以小时计)服从正态分布N(μ, σ)其中μ, σ2均未知.现测得16只元件的寿命如下: 159 280 101 212 224 379 179 264  ...

  4. MySQL 5.7贴心参数之 log_timestamps

    写在前面 使用 MySQL 的过程中,经常会有人碰到这么一个问题,看错误日志.慢查询日志的时候,时间总是和本地时间对不上,差了 8 个小时,这样分析起来就相对麻烦了一些. 新改进 对于不知道是什么原因 ...

  5. 接触响应式-css3-media判断屏幕分辨率

    // IE6.7.8不支持css3    使用响应式一般用bootstrap框架(IE8使用时须引用Respond.js)而不用原生JS 外联式: <link type="text/c ...

  6. 读书笔记 effective c++ Item 53 关注编译器发出的警告

    许多程序员常常忽略编译器发出的警告.毕竟,如果问题很严重,它才将会变成一个error,不是么?相对来说,这个想法可能在其它语言是无害的,但是在C++中,我敢打赌编译器的实现者对于对接下来会发生什么比你 ...

  7. 在spring boot环境中使用fastjson + redis的高速缓存技术

    因为项目需求,需要在spring boot环境中使用redis作数据缓存.之前的解决方案是参考的http://wiselyman.iteye.com/blog/2184884,具体使用的是Jackso ...

  8. linux下安编译安装redis

    1.先进入要安装到的目录,比如我要把redis安装到/usr/local/redis下,那就先进入/usr/local cd /usr/local 2.然后下载安装包,并解压 wget http:// ...

  9. Java中的WebService服务

    一.在本地发布一个webservice服务 1.使用jdk中的 javax.xml.ws.Endpoint 类的 static Endpointpublish(Stringaddress,Object ...

  10. SQL注入详细介绍及如何防范SQL注入式攻击

    一. SQL注入攻击的简单示例. statement := "SELECT * FROM Users WHERE Value= " + a_variable + " 上面 ...