|
|
<!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
2018-1-31 12:23 上傳
點(diǎn)擊文件名下載附件
下載積分: 黑幣 -5
58.33 KB, 下載次數(shù): 5, 下載積分: 黑幣 -5
|
QQ好友和群
QQ空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
