<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Test</title>

    <script  src="jquery.1.11.0.min.js"></script>

    <script type="text/javascript">

        $(function () {

            settime_show();

            $('#btn').click(function () {

            });

        });

        function settime_show() {

            setTimeout(show, 2000);

        }

        function show() {

            $('.bg').show();

            $('.show').fadeIn('slow')

            //$('.show').show('slow');

            setTimeout(hide, 4000);

            //$('.show').slideToggle('slow')

            //$('.show').fadeToggle('slow');

        }

        function hide() {

            //$('.bg').hide('slow');

            //$('.show').hide('slow');

            $('.show').fadeOut('slow');

            $('.bg').fadeOut('slow');

        }

     </script>

    <style type="text/css">

        .bg {

            display: none;

            position: absolute;

            top: 0%;

            left: 0%;

            width: 100%;

            height: 100%;

            background-color: black;

            z-index: 1001;

            -moz-opacity: 0.7;

            opacity: .70;

            filter: alpha(opacity=70);

        }

        .show {

            display: none;

            position: absolute;

            top: 25%;

            left: 22%;

            width: 53%;

            height: 49%;

            padding: 8px;

            border: 8px solid #E8E9F7;

            background-color: white;

            z-index: 1002;

            text-align:center;

            /*overflow: auto;*/

        }

    </style>

</head>

<body>

       <button id="btn">show</button>

       <div class="show">

           <img src="/356.jpg"  width="300" height="300"/>

       </div>

       <div class ="bg"></div>

</body>

</html>
 

JavaScript+css+ div HTML遮罩層效果的更多相关文章

  1. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  2. 2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

    1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position: ...

  3. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  4. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  5. JavaScript+CSS+DIV实现表格变色示例

    <!DOCTYPE html> <html> <head> <title>colortable.html</title> <scrip ...

  6. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  7. 精通CSS+DIV基础总结（三）

    Div+CSS可是实现简单的网页设计,对于需要添加动作,更方便的交互,Javascript给我们提供了方便:数据的存储可以利用XML使其更加方便:而对于减少页面与服务器的交互,可以利用Ajax技术,与 ...

  8. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  9. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

随机推荐

  1. TensorFlow学习笔记 补充1——InteractiveSession

    InteractiveSession 大家有时候在阅读代码时会看见InteractiveSession而不是熟悉的Session,这是什么东东呢? 其实,它们只有一点不同..... Interacti ...

  2. 手把手教你用git和SourceTree上传项目到github细解（转）

    尊重原创:https://blog.csdn.net/qq_32365567/article/details/52859166 一.引言 我想大家现在都很熟悉github了,也能运用github上开源 ...

  3. 自己实现strcpy函数

    #include //printf #include //ssert #include //malloc #include //strlen char * sstrcpy(char * strdst, ...

  4. Spring 新手教程（二） 生命周期和作用域

    以下的知识点是针对使用配置文件讲的(annotation相应标签后面文章会具体阐述) Bean的生命周期: 为什么关心这个问题? 我们使用IOC的目的就是为了让Spring IOC帮我们管理对象.从而 ...

  5. doxygen可以生成C/C++代码的文档（根据注释）

    类似这样的注释(目前还没用到,先写一个笔记在这,免得忘了) 就像java的注释生成html文档一样

  6. Oracle基础学习登陆SQLPLUS（一）

    SQLPLUS是ORACLE公司开发的非常简洁的管理工具,SQLPLUS是最好的,最核心的ORACLE管理工具.SQLPLUS简洁而高效,舍弃浮华,反璞归真.使用sqlplus,进入sqlplus并进 ...

  7. Python - except不指定异常类别（转）

    From:How to properly ignore Exceptions? try: doSomething() except: pass or try: doSomething() except ...

  8. 红外图像盲元补偿matlab实现源码与效果验证

    在国内红外公司绝大多数一直以来国外进口的成像芯片,能够进行红外芯片自助开发的电学应该只有大立光电和广微积电光学方法只有上海巨哥和一直未能产 品化的昆山光微电子.由于政治和历史原因,欧美对中国大陆还是实 ...

  9. 分享一个编译期输出TODO,FIXME列表的宏

    效果,双击能跳到相应位置: >------ Build started: Project: TestVS2013, Configuration: Debug Win32 ------ > ...

  10. PMP杂谈--项目组织，矩阵组织，职能型组织，复合型组织

    (1)项目组织的优缺点:优:项目经理权力大:缺:解散时焦虑.没有提拔权力,不利于专业技术积累,设备反复.难以保证资源的充分利用. (2)矩阵组织的优缺点:优:资源利用率高,横向信息沟通.项目经理权力提 ...