html5素材

ID:281105 · 发表于 2018-1-31 12:24

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
            html{
                     height: 100%;
            }
            body{
                     background: url("images/timg.jpg") no-repeat;
                     background-size: cover;
            }
            #wrap{
                     width:500px;
                     height:350px;
                     margin:200px auto;
                     box-shadow: 0px 0px 10px #cc33ff;
                     font-family:'Microsoft yahei';
            }
            #box{
                     position:relative;
                     width:500px;
                     height:350px;
            }
            #bin{
                     width:150px;
                     height:35px;
                     background:#ddd;
                     text-align:center;
                     line-height:35px;
                     margin:0 auto;
                     color: #63f;
            }
            #box span{
                     display:block;
                     width:192px;
                     margin:0 auto;
                     line-height:350px;
                     color: #3f3;
                     font-weight: bold;
            }
            #box p{
                     position:absolute;
                     left:0;
                     bottom:-50px;
                     width:75px;
                     height:25px;
                     margin-top:10px;
                     color: #c00;
            }
            #box img{
                     width:100px;
                     height:100px;
            }
  </style>
</head>
<body>
            <div id='wrap'>
                     <div id='box'>
                              <span>可以将文件拖放到这里！！</span>
                              <p>共0张图片</p>
                     </div>
                     <div id='bin'>回收站</div>
            </div>
            <script>
                     var oBox=document.getElementById("box");
                     var oSpan=document.getElementsByTagName("span")[0];
                     oBox.addEventListener("dragenter",drag,false);
                     oBox.addEventListener("dragover",drag,false);
                     oBox.addEventListener("dragleave",drag,false);
                     oBox.addEventListener("drop",drag,false);
                     function drag(ev){
                              ev.preventDafault();
                              switch(ev.type){
                                             case "dragenter":
                                             oSpan.style.display="none";
                                             break;
                                             case "dragover": break;

                                    }

                     }
            </script>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册