上传弹出窗（仿百度云）V_1（学习）_puppetter 弹出窗上传-优快云博客

本文链接：https://blog.youkuaiyun.com/u011488769/article/details/45769107

本文深入探讨了游戏开发领域的核心技术，包括Unity3D、cocos2dX等游戏引擎的使用，以及OpenGL、OpenCV等图像处理技术在游戏开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传弹出窗XTY版本NO.1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
a {
position: relative;
text-decoration: none;
}
a:hover:before {
position: absolute;
top: 20px;
right: 0;
content: attr(title);
color: #000000;
border: 1px solid #242424;
background-color: #E5E5E5;
}
.uploadwindow {
box-shadow: 0 0 20px -2px rgba(0,0,0,.5);
width: 635px;
z-index: 10000;
border: 0;
bottom: 5px;
right: 30px;
position: absolute;
background-color: white;

}
.uploadwindow-top {
position: relative;
left: 0px;
top: 0px;
background: #408EE6;
width: 635px;
height: 39px;
line-height: 39px;
}
.uploadwindow-top-text {
margin-left: 10px;
font-weight: 700;
float: left;
color: white;
}
.uploadwindow-top-MaxAndMin {

float: right;
width: 20px;
height: 20px;
background: url(img/minwindows.png) no-repeat;
position: relative;
right: 40px;
top: 10px;
cursor: pointer;
}
.uploadwindow-top-MaxAndMin:hover{
margin-top:2px;
}
.uploadwindow-top-close:hover{
margin-top:2px;
}
.uploadwindow-top-close {
float: right;
width: 20px;
height: 20px;
background: url(img/close1.png) no-repeat;
position: relative;
right: -7px;
top: 10px;
cursor: pointer;
}
.uploadwindow-center {
position: relative;
left: 0px;
top: 0px;
overflow-y:auto;
overflow-x:hidden;
width: 635px;
height: 377px;
}
.uploadwindow-center-ul {
position: relative;
left: 0px;
top: 0px;
list-style: none;
width: 635px;
height: 377px;
margin: 0px;
padding: 0px;
font-size: 12px;
}
.uploadwindow-center-line {
display:block;
height:24px;
padding: 8px 0;
border-bottom: 1px solid #d2d2d2;
line-height: 24px;
}
.uploadwindow-center-line-div1 {
height: 24px;
width: 635px;
float: left;
}
.uploadwindow-center-line-div2 {
height: 24px;
width: 253px;
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.uploadwindow-center-line-div2-span {
display: block;
height: 24px;
width: 24px;
background: url(img/other.png) no-repeat;
float: left;
margin-left: 25px;
margin-top: 4px;
}
.uploadwindow-center-line-fliesize {
float: left;
width: 80px;
height: 24px;
margin-left: 10px;
}
.uploadwindow-center-line-way {

float: left;
width: 82px;
height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.uploadwindow-center-line-state {
float: left;
width: 120px;
height: 24px;
margin-left: 20px;
}
.uploadwindow-center-line-way-a{
color:#06c;
}
.uploadwindow-center-line-way-a:hover {
text-decoration: underline;
}
.closeupload{
float:right;
margin-right:50px;
margin-top:4px;
width:16px;
height:16px;
background:url(img/close2.png) no-repeat;
}
.closeupload:hover{
background:url(img/close3.png) no-repeat;
margin-top:6px;
}
</style>
<script type="text/javascript">
$(function(){
$("#uploadWindowMaxAndMin").click(function(){
var bottom=$(".uploadwindow").css("bottom");
bottom=parseInt((bottom.substring(0,(bottom.length-2))));
if(bottom>0){
$(".uploadwindow-top-MaxAndMin").css("background","url(img/maxwindows.png) no-repeat");
$(".uploadwindow").css("bottom","-377px");
}else if(bottom<0){
$(".uploadwindow").css("bottom","5px");
$(".uploadwindow-top-MaxAndMin").css("background","url(img/minwindows.png) no-repeat")
}
});
$(".uploadwindow-top-close").click(function(){
$(".uploadwindow").hide();

});
});
</script>
</head>

<body>
<div class="uploadwindow">
<div class="uploadwindow-top">
<strong id="uploadwindowTopText" class="uploadwindow-top-text">上传完成</strong>
<div id="uploadWindowMaxAndMin" class="uploadwindow-top-MaxAndMin"></div>
<div class="uploadwindow-top-close"></div>
</div>
<div class="uploadwindow-center">
<ul class="uploadwindow-center-ul">
<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>已取消</span>
</div>
</div>
</li>



<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span style="display:block;height:16px;width:16px;background:url(img/uploadsuccess.png) no-repeat"></span>
</div>
</div>
</li>


<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span style="display:block;height:16px;width:16px;background:url(img/uploadlose.png) no-repeat"></span>
</div>
</div>
</li>


<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span style="display:block;height:16px;width:16px;background:url(img/uploadsuccess.png) no-repeat"></span>
</div>
</div>
</li>


<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span style="color:red">超过1G限制</span>
</div>
<div class="closeupload">
</div>
</div>
</li>



<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span style="display:block;height:16px;width:16px;background:url(img/uploadsuccess.png) no-repeat"></span>
</div>
</div>
</li>

<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>22%(77KB/S)</span>

</div>
<div class="closeupload">
</div>
</div>
</li>


<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>排队中</span>

</div>
<div class="closeupload">
</div>
</div>
</li>



<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>排队中</span>

</div>
<div class="closeupload">
</div>
</div>
</li>






<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>排队中</span>

</div>
<div class="closeupload">
</div>
</div>
</li>




<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>排队中</span>

</div>
<div class="closeupload">
</div>
</div>
</li>





<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>排队中</span>

</div>
<div class="closeupload">
</div>
</div>
</li>



<li class="uploadwindow-center-line">
<div class="uploadwindow-center-line-div1">
<div class="uploadwindow-center-line-div2" title="DirnameDirnameDirnameDirnameDirnameDirname.exe">
<span class="uploadwindow-center-line-div2-span">
</span>
DirnameDirnameDirnameDirnameDirnameDirname.exe
</div>
<div class="uploadwindow-center-line-fliesize">
<span id="fileSize">
1020.9M
</span>
</div>
<div class="uploadwindow-center-line-way" style="">
<a href="javascript:void(0);" title="我的路径我的路径我的路径我的路径我的路径我的路径" class="uploadwindow-center-line-way-a">我的路径我的路径我的路径我的路径我的路径</a>
</div>
<div class="uploadwindow-center-line-state">
<span>排队中</span>

</div>
<div class="closeupload">
</div>
</div>
</li>

</ul>
</div>
</div>
</body>
</html>