zoukankan      html  css  js  c++  java
  • JavaScript+css+ div HTML遮罩層效果

    <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>
     
  • 相关阅读:
    bzoj4358: permu
    bzoj4636: 蒟蒻的数列
    bzoj4229: 选择
    bzoj4561: [JLoi2016]圆的异或并
    bzoj2618: [Cqoi2006]凸多边形
    bzoj1803: Spoj1487 Query on a tree III
    bzoj2467: [中山市选2010]生成树
    PostgreSQL服务器存储参数的内部查看方法和实际表述之间的关系
    PostgreSQL 系统表
    PostgreSQL环境中查看SQL执行计划示例
  • 原文地址:https://www.cnblogs.com/stuart/p/5131430.html
Copyright © 2011-2022 走看看