zoukankan      html  css  js  c++  java

  • jQuery实现上传进度条效果

    效果：（点击上传按钮）

    See the Pen pjGNJr by moyu (@MoYu1991) on CodePen.

    html代码：

     
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>upload</title>
    6. <link rel="stylesheet" type="text/css" href="upload/upload.css">
    7. <script type="text/javascript" src="upload/jquery.js"></script>
    8. </head>
    9. <body>
    10. <span class="upload-span">开始上传文件</span>
    11. <div class="upload-mask"></div>
    12. <div class="upload-component">
    13. <div class="upload-close">
    14. <span class="upload-close-span">关闭</span>
    15. </div>
    16. <div class="upload-content">
    17. <div class="progress">
    18. <span class="upload-text"></span>
    19. <span class="uploaded"></span>
    20. </div>
    21. <div class="confirm-cancel">
    22. <span class="confirm">确认</span>
    23. <span class="cancel">取消</span>
    24. </div>
    25. </div>
    26. </div>
    27. <script type="text/javascript" src="upload/upload.js"></script>
    28. </body>
    29. </html>
     
    CSS代码：
     
    1. .upload-span{
    2. display:inline-block;
    3. width:120px;
    4. height:40px;
    5. color:#FFFFFF;
    6. text-align: center;
    7. line-height:40px;
    8. background-color: blue;
    9. border:2px solid blue;
    10. border-radius:5px;
    11. cursor: pointer;
    12. letter-spacing:2px;
    13. }
    14. .upload-mask{
    15. position: absolute;
    16. top:0;
    17. left:0;
    18. z-index:9;
    19. width:100%;
    20. height:100%;
    21. background-color: rgba(84,84,84,0.3);
    22. display: none;
    23. }
    24. .upload-component{
    25. position: absolute;
    26. z-index:99;
    27. top:50%;
    28. left:50%;
    29. margin-left:-120px;
    30. margin-top:-60px;
    31. width:240px;
    32. height:120px;
    33. background-color:#FFFFFF;
    34. display:none;
    35. }
    36. .upload-close{
    37. position: relative;
    38. height:30px;
    39. background-color: rgb(234,234,234);
    40. }
    41. .upload-close span{
    42. position: absolute;
    43. right:15px;
    44. line-height:30px;
    45. cursor: pointer;
    46. }
    47. .upload-content,.confirm-cancel{
    48. margin-top:15px;
    49. }
    50. .progress{
    51. position:relative;
    52. width:90%;
    53. height:22px;
    54. margin-left:4.88888%;
    55. text-align: center;
    56. line-height:22px;
    57. border:1px solid #ccc;
    58. }
    59. .upload-text{
    60. position:absolute;
    61. z-index:99999;
    62. color:red;
    63. }
    64. .uploaded{
    65. position:absolute;
    66. left:0;
    67. z-index:9999;
    68. width:0%;
    69. height:100%;
    70. background-color: blue;
    71. color:#FFFFFF;
    72. }
    73. .confirm-cancel span{
    74. display:inline-block;
    75. width:60px;
    76. height:30px;
    77. line-height:30px;
    78. text-align: center;
    80. background-color:#ccc;
    81. cursor:wait;
    82. }
    83. .confirm{
    85. margin-left:40%;
    86. }
    87. .cancel{
    89. margin-left:10px;
    90. }
     
    jQuery代码：
     
    1. $(function (){
    3. var $uploadSpan = $('.upload-span');
    4. var $uploadMask = $('.upload-mask');
    5. var $uploadContent = $('.upload-component');
    6. var $closeConfirmCancel = $('.upload-close-span,.confirm,.cancel');
    7. var $uploadTextSpan = $('.upload-text');
    9. function showMask(){
    10. $(".upload-mask,.upload-component").css({display:'block'});
    11. progressBar();
    12. $uploadSpan.off('click',showMask);
    13. }
    15. function hiddenMask(){
    16. $uploadMask.css({display:'none'});
    17. $uploadSpan.on('click',showMask);
    18. }
    20. function closeConfirmCancel(){
    21. $uploadContent.css({display:'none'});
    22. $uploadTextSpan.text('').next().css({width:0});
    23. hiddenMask();
    24. }
    26. // 模拟进度
    27. function progressBar(){
    28. var max =100;
    29. var init =0;
    30. var uploaded;
    31. var test = setInterval(function(){
    32. init +=5;
    33. uploaded = parseInt(init / max *100)+'%';
    34. $uploadTextSpan.text(uploaded).next().css({width:uploaded});
    35. if(init ===100){
    36. clearInterval(test);
    37. $uploadTextSpan.text('上传完成');
    38. $('.confirm-cancel span').css({cursor:'pointer'});
    39. $('.confirm').css({backgroundColor:'rgb(111,197,293)'});
    40. $('.cancel').css({backgroundColor:'rgb(175,194,211)'})
    41. $closeConfirmCancel.on('click',closeConfirmCancel);
    42. }
    43. else{
    45. $closeConfirmCancel.off('click',closeConfirmCancel);
    46. $('.upload-close-span').on('click',function(){
    47. clearInterval(test);
    48. closeConfirmCancel();
    49. });
    51. }
    52. },1000);
    53. }
    55. $uploadSpan.on('click',showMask);
    57. })
     
  • 相关阅读:
    STL堆算法性能分析与优化方法(GCC4.4.2 stl_heap.h源代码分析与改进方案）
    POJ 1631 Bridging Singnals
    一个用于读unicode文本的迭代器(iterator)
    常用文本压缩算法及实现(To be finshed!)
    volatile语义及线程安全singleton模式探讨
    C++实现的huffman与canonical huffman的压缩解压缩系统,支持基于单词的压缩解压缩
    linux环境下 C++性能测试工具 gprof + kprof + gprof2dot
    多线程统计多个文件的单词数目C++0x多线程使用示例
    python嵌入C++ boost.python如何在C++中调用含有不定长参数tuple变量和关键字参数dict变量的函数
    boost.python入门教程 python 嵌入c++
  • 原文地址：https://www.cnblogs.com/moyuling/p/4b495108fef1d9e80f5fd118ec708ad0.html
Copyright © 2011-2022 走看看