我正在尝试重用我曾经使用过的主题中存在的一些代码。我似乎无法让它独立工作。
它应该简单地使用HTML中的值并快速为数字设置动画。
请参阅此示例：https://jsfiddle.net/96roocq1/5/
或下面的JS / CSS / HTML：
<div class="counter_holder center" style="color:#ffffff; font-size:168px;">
<span class="counter type1" data-delay="" style="background-color: black; height:168px; line-height:168px;">1678</span>
</div>
.counter_holder {
display: block;
opacity: 0;
filter: alpha(opacity: 0);
-webkit-transition: opacity 0.3s ease 0s;
-moz-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
width: 100%;
font-size: 150px;
line-height: 150px;
}
.counter_holder.left {
text-align: left;
}
.counter_holder.right {
text-align: right;
}
.counter_holder.center {
text-align: center;
}
.counter_holder span.counter {
font-family: "Oswald", sans-serif;
overflow: hidden;
display: inline-block !important;
text-align: center;
height: 150px;
font-size: inherit;
line-height: inherit;
}
.counter_holder h4 {
margin: 30px 0px 0px;
}
.counter_holder p {
margin: 18px 0px 0px;
}
.tocounter {
float: none;
margin: 0px;
}
var $j = jQuery.noConflict();
function resizeFonts(){
"use strict";
if($j(".counter_holder").length){
$j(".counter_holder").each(function(){
var $this = $j(this);
var counterFontSize = $j(this).css("font-size");
var counterDigitsWidth = $this.find('span.counter').width();
var resize = function () {
if($this.width() <= counterDigitsWidth){
$this.css('font-size', Math.min($this.width() / (0.3*10), parseFloat(counterFontSize)));
$this.css('line-height', Math.min($this.width() / (0.3*10), parseFloat(counterFontSize))+'px');
$this.find('span.counter').css('line-height', Math.min($this.width() / (0.3*10), parseFloat(counterFontSize))+'px');
$this.find('span.counter').css('height', Math.min($this.width() / (0.3*10), parseFloat(counterFontSize))+'px');
}else{
$this.css('font-size', parseFloat(counterFontSize));
$this.css('line-height', parseFloat(counterFontSize)+'px');
$this.find('span.counter').css('line-height', parseFloat(counterFontSize)+'px');
$this.find('span.counter').css('height', parseFloat(counterFontSize)+'px');
}
};
resize();
$j(window).on('resize orientationchange', resize);
});
}
}
function initToCounter() {
"use strict";
if ($j('.counter.type1').length) {
$j('.counter.type1').each(function() {
var delay = $j(this).data('delay');
var time = 0;
if (delay !== "" && delay !== 0) {
time = delay;
}
var $this = $j(this);
if ($j('.touch .no_delay').length) {
$this.parent().css('opacity', '1');
var $max = parseFloat($this.text());
$this.countTo({
from: 0,
to: $max,
speed: 1500,
refreshInterval: 50
});
resizeFonts();
} else {
$this.appear(function() {
setTimeout(function() {
$this.parent().css('opacity', '1');
var $max = parseFloat($this.text());
$this.countTo({
from: 0,
to: $max,
speed: 1500,
refreshInterval: 50
});
resizeFonts();
}, time);
}, {
accX: 0,
accY: -200
});
}
});
}
}
/*
* jQuery.appear
* https://github.com/bas2k/jquery.appear/
* http://code.google.com/p/jquery-appear/
*
* Copyright (c) 2009 Michael Hixson
* Copyright (c) 2012 Alexander Brovikov
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
*/
(function($) {
$.fn.appear = function(fn, options) {
var settings = $.extend({
//arbitrary data to pass to fn
data: undefined,
//call fn only on the first appear?
one: true,
// X & Y accuracy
accX: 0,
accY: 0
}, options);
return this.each(function() {
var t = $(this);
//whether the element is currently visible
t.appeared = false;
if (!fn) {
//trigger the custom event
t.trigger('appear', settings.data);
return;
}
var w = $(window);
//fires the appear event when appropriate
var check = function() {
//is the element hidden?
if (!t.is(':visible')) {
//it became hidden
t.appeared = false;
return;
}
//is the element inside the visible window?
var a = w.scrollLeft();
var b = w.scrollTop();
var o = t.offset();
var x = o.left;
var y = o.top;
var ax = settings.accX;
var ay = settings.accY;
var th = t.height();
var wh = w.height();
var tw = t.width();
var ww = w.width();
if (y + th + ay >= b &&
y <= b + wh + ay &&
x + tw + ax >= a &&
x <= a + ww + ax) {
//trigger the custom event
if (!t.appeared) t.trigger('appear', settings.data);
} else {
//it scrolled out of view
t.appeared = false;
}
};
//create a modified fn with some additional logic
var modifiedFn = function() {
//mark the element as visible
t.appeared = true;
//is this supposed to happen only once?
if (settings.one) {
//remove the check
w.unbind('scroll', check);
var i = $.inArray(check, $.fn.appear.checks);
if (i >= 0) $.fn.appear.checks.splice(i, 1);
}
//trigger the original fn
fn.apply(this, arguments);
};
//bind the modified fn to the element
if (settings.one) t.one('appear', settings.data, modifiedFn);
else t.bind('appear', settings.data, modifiedFn);
//check whenever the window scrolls
w.scroll(check);
//check whenever the dom changes
$.fn.appear.checks.push(check);
//check now
(check)();
});
};
//keep a queue of appearance checks
$.extend($.fn.appear, {
checks: [],
timeout: null,
//process the queue
checkAll: function() {
var length = $.fn.appear.checks.length;
if (length > 0) while (length--) ($.fn.appear.checks[length])();
},
//check the queue asynchronously
run: function() {
if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
$.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
}
});
//run checks when these methods are called
$.each(['append', 'prepend', 'after', 'before', 'attr',
'removeAttr', 'addClass', 'removeClass', 'toggleClass',
'remove', 'css', 'show', 'hide'], function(i, n) {
var old = $.fn[n];
if (old) {
$.fn[n] = function() {
var r = old.apply(this, arguments);
$.fn.appear.run();
return r;
}
}
});
})(jQuery);
感谢。