js轻量级进度条nanobar插件


js轻量级进度条nanobar插件
js轻量级进度条nanobar插件以及轻量级进度条、nanobar等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">

2. 引入JS

<script type="text/javascript" src="js/nanobar.js"></script>

3. HTML代码

<div class="container">
	<br>
	<h1 id="nanobar">nanobar.js</h1>
	<p>页面顶部进度条</p>
	<br>
	<div class="general-buttons">
		<button class="doc_go" onClick="simplebar.go(30)">nanobar.go(30)</button>
		<button class="doc_go" onClick="simplebar.go(60)">nanobar.go(60)</button>
		<button class="doc_go" onClick="simplebar.go(100)">nanobar.go(100)</button>
	</div>
	<br>
	<hr>
	<br>
	  <section id="color">
		<button class="doc_go" onClick="colorbar.go(30)">nanobar.go(30)</button>
		<button class="doc_go" onClick="colorbar.go(60)">nanobar.go(60)</button>
		<button class="doc_go" onClick="colorbar.go(100)">nanobar.go(100)</button>
	  </section>
	  <section id="centered">
		<button class="doc_go" onClick="centeredbar.go(30)">nanobar.go(30)</button>
		<button class="doc_go" onClick="centeredbar.go(60)">nanobar.go(60)</button>
		<button class="doc_go" onClick="centeredbar.go(100)">nanobar.go(100)</button>
	  </section>
</div>
<script type="text/javascript">
	var simplebar = new Nanobar();
	simplebar.go(50);
	var colorbar = new Nanobar({target: document.getElementById('color')});
	colorbar.go(50);
	var centeredbar = new Nanobar({target: document.getElementById('centered')});
	centeredbar.go(50);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><br><br><br>
</div>

相关推荐

  • nanobar.js进度条插件

    nanobar.js进度条插件以及nanobar.js、进度条插件等js/jquery网页特效代码下载。

    Border circle admin 2019-12-17 21:15:04 0 0 0

发表评论

相关文章