左右切换css，html
yaodilu 2020-08-03
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.shade {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.55);
}
.shade div {
width: 300px;
height: 200px;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background: white;
border-radius: 5px;
text-align: center;
}
.a-upload {
position: fixed;
padding: 25px 15px;
height: 20px;
line-height: 20px;
font-size: 50px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.img_div{min-height: 100px; min-width: 100px;}
.isImg{width: 200px; height: 200px; position: relative; float: left; margin-left: 10px;}
.removeBtn{position: absolute; top: 0; right: 0; z-index: 11; border: 0px; border-radius: 50px; background: red; width: 22px; height: 22px; color: white;}
.shadeImg{position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 15;
text-align: center;
background: rgba(0, 0, 0, 0.55);}
.showImg{width: 400px; height: 500px; margin-top: 140px;}
</style>
<script type="text/javascript">
</script>
<title></title>
</head>
<body>
<a href="javascript:;" class="a-upload">
<input type="file" name="myFile" id="myFile" multiple="multiple" />+
</a>
<div class="img_div">
</div>
<div class="shade" onclick="javascript:closeShade()">
<div class="">
<span class="text_span">
</span>
</div>
</div>
<div class="shadeImg" onclick="javascript:closeShadeImg()">
<div class="">
<img class="showImg" src="">
</div>
</div>
</body>
<script type="text/javascript" src="js/1..js" ></script>
</html>
