jQuery Incremental Counter - 숫자가 올라가는 카운터 예제 > Script

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Incremental Counter Plugin Demo</title>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.incremental-counter.js"></script>

<style>
body { background-color:#384047;}
.container { margin:150px auto; max-width:500px; text-align:center}
h1 { margin-bottom:30px; color:#fff; text-align:center;}
.incremental-counter{margin:1%}
.incremental-counter .num {
background: #eee;
border: 1px solid #fff;
border-radius: 4px;
color: #384047;
display: inline-block;
height: 64px;
line-height: 62px;
margin: 0 4.5px;
position: relative;
text-align: center;
top: -1px;
width: 50px;
font-size: 45px;
font-size: 3.72625em;
font-weight: 700;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
font-family: "Open Sans",Arial,Helvetica,sans-serif;
}
.incremental-counter .num::before {
background: #384047;
content: "";
display: block;
height: 1px;
left: -1px;
margin: -0.5px 0 0;
position: absolute;
right: -1px;
top: 50%;
width: auto;
}
</style>
</head>

<body>

<div class="container">
<div class="incremental-counter" data-value="55650"></div>
<div class="incremental-counter" data-value="360"></div>
<div class="incremental-counter" data-value="36200"></div>
</div>
<script>
$(".incremental-counter").incrementalCounter();
</script>

</body>
</html>

첨부파일

스크립트 & 소스코드 공유

jQuery jQuery Incremental Counter - 숫자가 올라가는 카운터 예제

페이지 정보

첨부파일

Let's create something great together.