<!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>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="dist/jquery.levelup.js"></script>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>类似电子游戏积分增加减少特效的jQuery数字动画插件 <span>Simple +1/-1 Animation similar to point accumulation in a video game</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<section class="main-content">
<h3>Demos</h3>
<h4>基本示例</h4>
<p>基本的+1 / -1动画效果</p>
<div class="btn-area">
<p>
<span id='basic_1'></span> -
<button id='incrementBtn' class="btn2">increment</button> -
<button id='decrementBtn' class="btn2">decrement</button>
</p>
</div>
<pre class="prettyprint lang-js">$('#basic_1').levelup('increment', 1);</pre>
<script>
$(function() {
$('#basic_1').levelup({'start' : 0});
$('#incrementBtn').on('click', function(event) {
$('#basic_1').levelup('increment', 1);
$(this).blur();
});
$('#decrementBtn').on('click', function(event) {
$('#basic_1').levelup('decrement', 1);
$(this).blur();
});
});
</script>
<h4>增加/减少较大的数值</h4>
<p>The increment and decrement methods allow for other values.</p>
<div class="btn-area">
<p>
<span id='basic_2'></span> -
<button id='incrementBtn_2' class="btn2">increment</button> -
<button id='decrementBtn_2' class="btn2">decrement</button>
</p>
</div>
<pre class="prettyprint lang-js">
$('#basic_2').levelup('increment', 10);
$('#basic_2').levelup('decrement', 7);</pre>
<script>
$(function() {
$('#basic_2').levelup({'start' : 0});
$('#incrementBtn_2').on('click', function(event) {
$('#basic_2').levelup('increment', 10);
$(this).blur();
});
$('#decrementBtn_2').on('click', function(event) {
$('#basic_2').levelup('decrement', 7);
$(this).blur();
});
});
</script>
<h4>Non-bold option</h4>
<p>The incrementer and decrementer are bold by default, but you can turn that off</p>
<div class="btn-area">
<p>
<span id='basic_3'></span> -
<button id='incrementBtn_3' class="btn2">increment</button> -
<button id='decrementBtn_3' class="btn2">decrement</button>
</p>
</div>
<pre class="prettyprint lang-js">
$('#basic_3').levelup({'start' : 0, 'incrementer' : {'bold' : false}});
$('#basic_3').levelup('increment', 10);
$('#basic_3').levelup('decrement', 7);</pre>
<script>
$(function() {
$('#basic_3').levelup({'start' : 0,
'incrementer' : {'bold' : false}});
$('#incrementBtn_3').on('click', function(event) {
$('#basic_3').levelup('increment', 10);
$(this).blur();
});
$('#decrementBtn_3').on('click', function(event) {
$('#basic_3').levelup('decrement', 7);
$(this).blur();
});
});
</script>
<h4>控制字体颜色</h4>
<p>You can specify the text color. This can be done via a class as well, but
this is for those who simply wish to control one aspect of it.</p>
<div class="btn-area">
<p>
<span id='basic_4'></span> -
<button id='incrementBtn_4' class="btn2">increment</button>
</p>
</div>
<pre class="prettyprint lang-js">
$('#basic_4').levelup({'start' : 0, 'incrementer' : {'color' : 'red'}});
$('#basic_4').levelup('increment', 10);
</pre>
<script>
$(function() {
$('#basic_4').levelup({'start' : 0,
'incrementer' : {'color' : 'red'}});
$('#incrementBtn_4').on('click', function(event) {
$('#basic_4').levelup('increment', 10);
$(this).blur();
});
});
</script>
<h4>控制class样式</h4>
<p>You can style the incrementer/decrementer however you like via a class.</p>
<div class="btn-area">
<p>
<span id='basic_5'></span> -
<button id='incrementBtn_5' class="btn2">increment</button>
</p>
</div>
<pre class="prettyprint lang-css">
<style>
.fun_times {
background-color: lightblue;
color: #FFA500;
box-shadow: 0 0 10px 10px #fff;
}
</style>
</pre>
<pre class="prettyprint lang-js">
$('#basic_5').levelup({'start' : 0, 'incrementer' : {'class' : 'fun_times'}});
$('#basic_5').levelup('increment', 10);
</pre>
<script>
$(function() {
$('#basic_5').levelup({'start' : 0,
'incrementer' : {'class' : 'fun_times'}});
$('#incrementBtn_5').on('click', function(event) {
$('#basic_5').levelup('increment', 10);
$(this).blur();
});
});
</script>
<h4>控制千分位逗号分隔</h4>
<p>You can set the thousands separator as anything you want. It is off by default.</p>
<div class="btn-area">
<p>
<span id='basic_6'></span> -
<button id='incrementBtn_6' class="btn2">increment</button>
</p>
</div>
<pre class="prettyprint lang-js">
$('#basic_6').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_6').levelup('increment', 5555);
</pre>
<script>
$(function() {
$('#basic_6').levelup({'start' : 1111, 'showThousands' : true});
$('#incrementBtn_6').on('click', function(event) {
$('#basic_6').levelup('increment', 5555);
$(this).blur();
});
});
</script>
<h4>Accumulator is not span - still must be inline display type</h4>
<p>If you don't use a span, which is inlined, you'll need to manually inline the type. This is
网页模板——jQuery实现类似电子游戏积分增加减少特效源码.zip
版权申诉
72 浏览量
2021-11-23
08:36:48
上传
评论
收藏 102KB ZIP 举报
网页模板——jQuery实现类似电子游戏积分增加减少特效源码.zip （14个子文件） 
132689850719585152 jquery_levelup css 
htmleaf-demo.css 6KB stylesheet.css 6KB normalize.css 8KB related 
2.jpg 17KB 1.jpg 39KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 10KB js jquery-2.1.1.min.js 82KB dist jquery.levelup.min.js 3KB jquery.levelup.js 10KB src levelup.js 10KB资源评论
易小侠
- 粉丝: 6487
- 资源: 9万+
