js 进度条，可实现结束和重新开始 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5     <title></title>
  6     <style type="text/css">
  7        
  8        
  9 
 10       
 11         .container {
 12             width: 960px;
 13             margin: 0 auto;
 14             overflow: hidden;
 15         }
 16 
 17 
 18         /* Full Width Progress Bar */
 19 
 20         #content {
 21             width: 200px;
 22             height: 5px;
 23             margin: 50px auto;
 24             background: #ccc;
 25             border-radius:15px;
 26         }
 27 
 28         .fullwidth .expand {
 29             width: 200px;
 30             height: 1px;
 31             margin: 2px 0;
 32             /*background: #2187e7;*/
 33             background: #1463ad;
 34             position: absolute;
 35             box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
 36             -moz-animation: fullexpand 10s ease-out;
 37             -webkit-animation: fullexpand 10s ease-out;
 38         }
 39 
 40         @-moz-keyframes fullexpand {
 41             0% {
 42                 width: 0px;
 43             }
 44 
 45             100% {
 46                 width: 200px;
 47             }
 48         }
 49 
 50         @-webkit-keyframes fullexpand {
 51             0% {
 52                 width: 0px;
 53             }
 54 
 55             100% {
 56                 width: 200px;
 57             }
 58         }
 59 
 60 
 61  
 62 
 63         /* Trigger button for javascript */
 64 
 65         .trigger, .triggerFull, .triggerBar {
 66             background: #000000;
 67             background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
 68             background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
 69             border-left: 1px solid #111;
 70             border-top: 1px solid #111;
 71             border-right: 1px solid #333;
 72             border-bottom: 1px solid #333;
 73             font-family: Verdana, Geneva, sans-serif;
 74             font-size: 0.8em;
 75             text-decoration: none;
 76             text-transform: lowercase;
 77             text-align: center;
 78             color: #fff;
 79             padding: 10px;
 80             border-radius: 3px;
 81             display: block;
 82             margin: 0 auto;
 83             width: 140px;
 84         }
 85 
 86             .trigger:hover, .triggerFull:hover, .triggerBar:hover {
 87                 background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
 88                 background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
 89             }
 90     </style>
 91     <script src="/js/jquery-1.8.3-min.js"></script>
 92     <script>
 93        
 94 
 95         $(document).ready(function () {
 96             //多久之后开始执行
 97             var duration = 10;
 98 
 99             $('#content').removeClass('fullwidth');
100             $('.triggerFull').click(function () {
101                 //清除使用了 finish() 方法之后的样式
102                 $(".expand").removeAttr("style");
103                 $('#content').removeClass('fullwidth').delay(duration).queue(function (next) {
104                     $(this).addClass('fullwidth');
105                     next();
106                 });
107                 return false;
108             });
109         });
110 
111         function finish()
112         {
113             $(".fullwidth .expand").css({ "-moz-animation": "fullexpand 1s ease-out", "-webkit-animation": "fullexpand 1s ease-out" });
114 
115         }119     </script>
120 </head>
121 <body>
122     <!-- FULL WIDTH -->
123     <div id="content">
124         <span class="expand"></span>
125     </div>
126     <a class="triggerFull" href="#">Start/Restart Animation</a>
127     <!-- END FULL WIDTH -->
128 
129 
130     <input type="button" value="finish" onclick="finish()" />
132 
133 </body>
134 </html>

 

posted @ 2015-10-19 10:12  Young汨  阅读(878)  评论(0)    收藏  举报