39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<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.0">
|
|
<title>轻量级jquery数字动画插件</title>
|
|
|
|
<style type="text/css">
|
|
body{background-color: #222222; color: #fff}
|
|
.container { margin:150px auto; max-width:480px;}
|
|
h2,h3 { text-align:center;}
|
|
.demo { text-align:center; margin-top:1000px;}
|
|
span.counter { display: block; margin: 20px auto; font-size: 64px; font-family: Arial; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="htmleaf-container">
|
|
|
|
<div class="container">
|
|
<h2>jQuery Countup.js Plugin Demo</h2>
|
|
<h3>向下滚动页面 ↓</h3>
|
|
<div class="demo">
|
|
<span class="counter">1,498,547.00</span>
|
|
<span class="counter">99.99</span>
|
|
<span class="counter">1234567</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
|
<script src="js/jquery.waypoints.min.js"></script>
|
|
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
|
|
<script type="text/javascript">
|
|
$('.counter').countUp();
|
|
</script>
|
|
</body>
|
|
</html> |