まだデータがありません。
アニメーション効果付きの棒グラフを作成「Thermometer」
当ページのリンクには広告が含まれています。
スポンサーリンク
アニメーション効果付きの棒グラフを作成するプラグイン「Thermometer」を紹介します。
jQueryプラグイン「Thermometer」
このプラグインを使えば、ページロードとともに棒グラフが指定した数値まで、びよ～んと動く棒グラフが作成できます。
また、アニメーションの速度を指定することができるので、便利です。さらに、横棒グラフだけではなく、縦棒グラフもつくれるのでおすすめ！
スポンサーリンク
デモでは、さまざまな速度の棒グラフアニメーションが楽しめます。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Thermometer のデモでーす。">
<title>Thermometer - jQuery Plugin Demo</title>
<style>
.thermometer-outer {
margin: 20px auto;
background: #c4f0ff;
border: 1px solid #c4c4c4;
border-radius: 3px;
}
.thermometer-outer-h {
height: 20px;
width: 100%;
}
.thermometer-outer-v {
height: 200px;
width: 20px;
}
.thermometer-inner {
background: #3f83f7;
}
.thermometer-inner-h {
height: 20px;
}
.thermometer-inner-v {
width: 20px;
}
</style>
</head>
<body>
<h1>Thermometerのデモでーす。</h1>
<div class="thermometer" data-percent="100" data-speed="400"></div>
<div class="thermometer" data-percent="90" data-speed="600"></div>
<div class="thermometer" data-percent="80" data-speed="800"></div>
<div class="thermometer" data-percent="70" data-speed="1000"></div>
<div class="thermometer" data-percent="60" data-speed="1200"></div>
<div class="thermometer" data-percent="50" data-speed="1400"></div>
<div class="thermometer" data-percent="40" data-speed="1600"></div>
<div class="thermometer" data-percent="30" data-speed="1800"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.thermometer.js"></script>
<script>
$(document).ready(function() {
$('.thermometer').thermometer();
});
</script>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/thermometer/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク