以下是 jQuery电子游戏积分增加减少特效 的示例演示效果:
部分效果截图:
HTML代码(index.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>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen">
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="dist/jquery.levelup.js"></script>
</head>
<body>
<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
a temporary fix that relates to where it lines up the animation.</p>
<div class="btn-area">
<div>
<h3 id='basic_7' style='display:inline'></h3>
<button id='incrementBtn_7' class="btn2">increment</button>
</div>
</div>
<pre class="prettyprint lang-js">
$('#basic_7').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_7').levelup('increment', 5555);
</pre>
<script>
$(function() {
$('#basic_7').levelup({'start' : 1111, 'showThousands' : true});
$('#incrementBtn_7').on('click', function(event) {
$('#basic_7').levelup('increment', 5555);
$(this).blur();
});
});
</script>
<h4>Value Accessor</h4>
<p>You'll want to use this to get the value instead of reading the text,
because the text could be out of date.</p>
<div class="btn-area">
<p>
<span id='basic_8'></span> -
<button id='incrementBtn_8' class="btn2">increment</button> -
<button id='readBtn_8' class="btn2">Get Value</button> :
<span id='valueResult_8'></span>
</p>
</div>
<pre class="prettyprint lang-js">$('#basic_8').levelup('get');</pre>
<script>
$(function() {
$('#basic_8').levelup({'start' : 0});
$('#incrementBtn_8').on('click', function(event) {
$('#basic_8').levelup('increment', 1);
$(this).blur();
});
$('#readBtn_8').on('click', function(event) {
var value = $('#basic_8').levelup('get');
$('#valueResult_8').text(value);
$(this).blur();
});
});
</script>
</section>
</body>
</html>
JS代码(levelup.js):
/** * jquery-levelup - jQuery Plugin to draw animated increment and decrement to a * number styled from video games. * URL:http://pstrinkle.github.com/jquery-levelup * Author:Patrick Trinkle <https://github.com/pstrinkle> * Version:1.0.2 * Copyright 2016 Patrick Trinkle * * Licensed under the Apache License,Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing,software * distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */
(function ($){
function LevelUp(config){
this.init(config);
}
LevelUp.prototype ={
/** * This is the only required option. * @type{
number}
*/
start:0,/** * This is the current value. * @type{
number}
*/
value:0,/** * Whether we separate numbers in thousands. * @type{
boolean}
*/
showThousands:false,/** * The thousands separator to use. * @tyep{
string}
*/
thousandSep:',',/** * These are the settings for the incrementer. * @type{
object}
*/
incrementer:{
bold:true,color:null,class:null,}
,/** * These are the settings for the decrementer * @type{
object}
*/
decrementer:{
bold:true,color:null,class:null,}
,//----------------------- protected properties and methods ------------- /** * @protected */
constructor:LevelUp,/** * Container element. Should be passed into constructor config * @protected * @type{
jQuery}
*/
el:null,/** * Init/re-init the object * @param{
object}
config - Config */
init:function(config){
$.extend(this,config);
}
,getValue:function(){
return this.value;
}
,setValue:function(newValue){
this.value = newValue;
}
,dataName:'levelup',animateUpdate:function (update){
var instance = this;
/* transition to this */
var $tw = instance.el;
var p = $tw.position();
var h = $tw.height();
var w = $tw.width();
// start it all the way to the left,then figure out its width var nl = p.left + w;
if (update >= 0){
/* * They have the same height,so just position it above by the * height. */
if (instance.showThousands){
update = numberWithCommas(update,instance.thousandSep);
}
var nt = p.top - h;
var s = getStyle(nt,nl,instance.incrementer);
var $x = $('<span>',{
text:"+" + update,style:s}
);
if (instance.incrementer.class){
$x.addClass(instance.incrementer.class);
}
}
else{
/* * They have the same height,so just position it at the same * place. */
if (instance.showThousands){
update = numberWithCommas(update,instance.thousandSep);
}
var nt = p.top;
var s = getStyle(nt,nl,instance.decrementer);
var $x = $('<span>',{
text:update,style:s}
);
if (instance.decrementer.class){
$x.addClass(instance.decrementer.class);
}
}
// width is 0 until it's rendered. $tw.parent().append($x);
var realWidth = $x.width();
var newerLeft = nl - realWidth;
$x.css('left',newerLeft + 'px');
// lower if after ~1/4th of a second. setTimeout(function(){
$x.css(trans);
var e = nt + (h);
$x.css('top',e + 'px');
setTimeout(function(){
$x.remove();
/* equivalent to a volatile pointer read */
var value = $tw.data(instance.dataName).getValue();
if (instance.showThousands){
value = numberWithCommas(value,instance.thousandSep);
}
$tw.text(value);
}
,250);
}
,100);
}
,}
var trans ={
'-webkit-transition':'all 0.25s','-moz-transition':'all 0.25s','-o-transition':'all 0.25s','transition':'all 0.25s'}
;
function numberWithCommas(x,sep){
return x.toString().replace(/\B(?=(\d{
3}
)+(?!\d))/g,sep);
}
/* * Should it always be bold? or is that incorrect,I can't recall yet. * I should have it check if the thing beneath it is bold? */
function getStyle(top,left,settings){
/* * Yes it's less optimal,why am I building it every time? * I was already technically just building a giant string... */
var styles = ["position:absolute","top:" + top + "px","left:" + left + "px","z-index:999" ];
if (settings.bold){
styles.push("font-weight:bold");
}
if (settings.color){
styles.push("color:" + settings.color);
}
return styles.join(";
");
}
//----------------------- Initiating jQuery plugin ------------------------- /** * Set up an animated incrementer/decrementer. * * @param configOrCommand - Config object or command name * Example:{
...}
;
* you may set any public property (see above);
* you may use .levelup('increment',incrementWith) to increment the * value * you may use .levelup('decrement',decrementWith) to decrement the * value * * @param commandArgument - Some commands (like 'increment') may require an * argument */
$.fn.levelup = function(configOrCommand,commandArgument){
/* It is possible that the text will be updated out of sequence * because of the timeouts,that you might not end up with the * right value,so the right value is basically always in data. */
var dataName = LevelUp.prototype.dataName;
if (typeof configOrCommand == 'string'){
commandArgument = parseInt(commandArgument);
/* just in case. */
if (configOrCommand === 'increment'){
/* you want to update this here in case they call it a lot. */
return this.each(function(){
var instance = $(this).data(dataName);
instance.setValue(instance.getValue() + commandArgument);
instance.animateUpdate(commandArgument);
}
);
}
else if (configOrCommand === 'decrement'){
return this.each(function(){
var instance = $(this).data(dataName);
instance.setValue(instance.getValue() - commandArgument);
instance.animateUpdate(-1 * commandArgument);
}
);
}
else if (configOrCommand === 'reset'){
return this.each(function(){
var instance = $(this).data(dataName);
instance.setValue(instance.start);
instance.el.text(instance.start);
}
);
}
else if (configOrCommand === 'get'){
var instance = $(this).data(dataName);
return instance.getValue();
}
}
/* handle init here,I later plan to use other options,such as formatting. */
return this.each(function(){
var el = $(this),instance = el.data(dataName),config = $.isPlainObject(configOrCommand) ? configOrCommand:{
}
;
if (instance){
/* they've set up some data values for us already to use. */
instance.init(config);
}
else{
var initialConfig = $.extend({
}
,el.data());
config = $.extend(initialConfig,config);
config.el = el;
/* We don't want a true deep copy of the whole prototype. */
if (config.incrementer){
var inc = $.extend(true,{
}
,LevelUp.prototype.incrementer,config.incrementer);
$.extend(config.incrementer,inc);
}
if (config.decrementer){
var dec = $.extend(true,{
}
,LevelUp.prototype.decrementer,config.decrementer);
$.extend(config.decrementer,dec);
}
instance = new LevelUp(config);
el.data(dataName,instance);
if (instance.showThousands){
instance.start = numberWithCommas(instance.start,instance.thousandSep);
}
el.text(instance.start);
}
}
);
}
;
}
(jQuery));
CSS代码(stylesheet.css):
*{box-sizing:border-box;}
body{padding:0;margin:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;font-size:16px;line-height:1.5;}
.btn{display:inline-block;margin-bottom:1rem;color:rgba(255,255,255,0.7);background-color:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);border-style:solid;border-width:1px;border-radius:0.3rem;transition:color 0.2s,background-color 0.2s,border-color 0.2s;}
.btn + .btn{margin-left:1rem;}
.btn:hover{color:rgba(255,255,255,0.8);text-decoration:none;background-color:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);}
@media screen and (min-width:64em){.btn{padding:0.75rem 1rem;}
}
@media screen and (min-width:42em) and (max-width:64em){.btn{padding:0.6rem 0.9rem;font-size:0.9rem;}
}
@media screen and (max-width:42em){.btn{display:block;width:100%;padding:0.75rem;font-size:0.9rem;}
.btn + .btn{margin-top:1rem;margin-left:0;}
}
.page-header{color:#fff;text-align:center;background-color:#159957;background-image:linear-gradient(120deg,#155799,#159957);}
.btn2{display:inline-block;font-size:0.9rem;margin-bottom:1rem;color:rgba(255,255,255,0.7);background-color:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);border-style:solid;border-width:1px;border-radius:0.3rem;transition:color 0.2s,background-color 0.2s,border-color 0.2s;}
.btn2:hover{color:rgba(255,255,255,0.8);text-decoration:none;background-color:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);}
.btn-area{color:#fff;padding-left:2rem;padding-top:1rem;background-color:#159957;background-image:linear-gradient(120deg,#155799,#159957);}
@media screen and (min-width:64em){.page-header{padding:5rem 6rem;}
}
@media screen and (min-width:42em) and (max-width:64em){.page-header{padding:3rem 4rem;}
}
@media screen and (max-width:42em){.page-header{padding:2rem 1rem;}
}
.project-name{margin-top:0;margin-bottom:0.1rem;}
@media screen and (min-width:64em){.project-name{font-size:3.25rem;}
}
@media screen and (min-width:42em) and (max-width:64em){.project-name{font-size:2.25rem;}
}
@media screen and (max-width:42em){.project-name{font-size:1.75rem;}
}
.project-tagline{margin-bottom:2rem;font-weight:normal;opacity:0.7;}
@media screen and (min-width:64em){.project-tagline{font-size:1.25rem;}
}
@media screen and (min-width:42em) and (max-width:64em){.project-tagline{font-size:1.15rem;}
}
@media screen and (max-width:42em){.project-tagline{font-size:1rem;}
}
.main-content:first-child{margin-top:0;}
.main-content img{max-width:100%;}
.main-content h1,.main-content h2,.main-content h3,.main-content h4,.main-content h5,.main-content h6{margin-top:2rem;margin-bottom:1rem;font-weight:normal;}
.main-content p{margin-bottom:1em;}
.main-content code{padding:2px 4px;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:0.9rem;color:#383e41;background-color:#f3f6fa;border-radius:0.3rem;}
.main-content pre{padding:0.8rem;margin-top:0;margin-bottom:1rem;font:1rem Consolas,"Liberation Mono",Menlo,Courier,monospace;color:#567482;word-wrap:normal;background-color:#f3f6fa;border:solid 1px #dce6f0;border-radius:0.3rem;}
.main-content pre > code{padding:0;margin:0;font-size:0.9rem;color:#567482;word-break:normal;white-space:pre;background:transparent;border:0;}
.main-content .highlight{margin-bottom:1rem;}
.main-content .highlight pre{margin-bottom:0;word-break:normal;}
.main-content .highlight pre,.main-content pre{padding:0.8rem;overflow:auto;font-size:0.9rem;line-height:1.45;border-radius:0.3rem;}
.main-content pre code,.main-content pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0;}
.main-content pre code:before,.main-content pre code:after,.main-content pre tt:before,.main-content pre tt:after{content:normal;}
.main-content ul,.main-content ol{margin-top:0;}
.main-content blockquote{padding:0 1rem;margin-left:0;color:#819198;border-left:0.3rem solid #dce6f0;}
.main-content blockquote >:first-child{margin-top:0;}
.main-content blockquote >:last-child{margin-bottom:0;}
.main-content table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all;}
.main-content table th{font-weight:bold;}
.main-content table th,.main-content table td{padding:0.5rem 1rem;border:1px solid #e9ebec;}
.main-content dl{padding:0;}
.main-content dl dt{padding:0;margin-top:1rem;font-size:1rem;font-weight:bold;}
.main-content dl dd{padding:0;margin-bottom:1rem;}
.main-content hr{height:2px;padding:0;margin:1rem 0;background-color:#eff0f1;border:0;}
@media screen and (min-width:64em){.main-content{max-width:64rem;padding:2rem 6rem;margin:0 auto;font-size:1.1rem;}
}
@media screen and (min-width:42em) and (max-width:64em){.main-content{padding:2rem 4rem;font-size:1.1rem;}
}
@media screen and (max-width:42em){.main-content{padding:2rem 1rem;font-size:1rem;}
}
.site-footer{padding-top:2rem;margin-top:2rem;border-top:solid 1px #eff0f1;}
.site-footer-owner{display:block;font-weight:bold;}
.site-footer-credits{color:#819198;}
@media screen and (min-width:64em){.site-footer{font-size:1rem;}
}
@media screen and (min-width:42em) and (max-width:64em){.site-footer{font-size:1rem;}
}
@media screen and (max-width:42em){.site-footer{font-size:0.9rem;}
}
分享到QQ
分享到微博
微信扫一扫
