デジタル時計のような数値をSVGで「sevenSeg.js」
当ページのリンクには広告が含まれています。
スポンサーリンク
デジタル時計のような数値をSVGで作成するプラグイン「sevenSeg.js」を紹介します。
jQueryプラグイン「sevenSeg.js」
このプラグインは、画像を使わずにHTML SVGで実装しているので、どんなサイズでもデジタル時計のような数値を実装することができます。ジャック・バウアーでおなじみの『24』
のカウントダウンのようなフォルムの数値が作成できます。
スポンサーリンク
このプラウグインの特徴を切り出したデモを作成したので、ご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>sevenSeg.js - jQueryプラグインまとめのカルマ</title>
<style>
.exampleContainer {
display: inline-block;
background-color: Black;
border-radius: 5px;
margin-left: 18px;
}
.exampleContainer div {
padding: 0.5em 0 1.4em 0;
height: 160px;
width: 500px;
}
</style>
</head>
<body>
<h1>sevenSeg.js のデモでーす。</h1>
<div class="exampleContainer">
<div data-bind="sevenSegArray: { digits: 4, value: mainExampleValue }"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="sevenSeg.js"></script>
<script>
$(function () {
var viewModel = {
mainExampleValue: ko.observable(24.00)
};
ko.applyBindings(viewModel);
setInterval(function() {
var value = +viewModel.mainExampleValue() - 0.01;
viewModel.mainExampleValue(value.toFixed(2));
}, 100);
});
</script>
</body>
</html>
jsファイルのダウンロードやその他オプションはこちらからどうぞ。
» sevenSeg.js
スポンサーリンク