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>
时间： 2024-08-06 03:44:16

js 进度条，可实现结束和重新开始的相关文章

在vue项目中使用Nprogress.js进度条

NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); NProgress.done(); 2.使用 router.js //导入 import NProgress from 'nprogress' import 'nprogress/nprogress.c

js进度条（伪）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style> .c{width: 700px;height: 90px;margin: 0 auto;} .c1 #t1{color: #999999;background-color: black;width: 835

js 进度条效果

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><style>#myProgress { width: 100%; height: 30px; position: relative; background-color: #ddd;} #myBar { background-color: #4CAF5

转载：JS进度条

转载地址:http://blog.csdn.net/treeClimber/article/details/569974 代码在原基础上稍作改动,如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Docum

js进度条小事例

<style> #div1{width: 500px;height: 20px;border: 1px solid gray;} #div2{height: 20px;width: 0px;background:green;} </style> <div id="div1"> <div id="div2"></div> </div> <span id="span1"&g

js 实现进度条功能。

/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options && options.width)?parseFloat(options.width) : parseFloat(this.options.width); this.h = (options && options.height)?parseFloat(options.height) : pa

简单的jquery进度条插件LineProgressbar.js

参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> $(function(){ $('#progressbar1').LineProgressbar({ percentage: 50 }); $('#progressbar2').L

基于Jquery的音乐播放器进度条插件

自己基于豆瓣FM的ui仿写qq音乐时,基于Jquery手写的进度条插件,效果图如下: 主要特色: ① 可自适应挂载元素的宽度,也可以自己设置进度条宽度: ② 支持部分默认参数修改(具体见使用说明): ③ 允许最大时间为23:59:59,高于此值将默认修改为此值: ④ 可以自己控制进度条动画的开关及重置: ⑤ 可以获取进度条当前时间和宽度,与H5的audio标签协调使用. 使用说明: /* * 功能描述:播放器进度条 * 参数: * option:挂载父元素 * inTime:进度条时间长度 *

网站顶部显示预加载进度条preload.js

网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/preload.js"></script> <script type="text/javascript">