标题: html5素材 [打印本页]
作者: 健身小子    时间: 2018-1-31 12:24
标题: html5素材
<!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>


素材.zip

58.33 KB, 下载次数: 5, 下载积分: 黑币 -5





欢迎光临 (http://www.51hei.com/bbs/) Powered by Discuz! X3.1