将图像添加到计数器中 [英] Add an image to an up Counter
问题描述
我有一个简单的计数器脚本,从数字'a'开始,循环到数字'b'..计数器工作正常,我只需要为每个数字添加一个简单的图像柜台。
这是剧本:
I have a simple script for a counter which starts from a number 'a' and loops till a number 'b'.. The counter is working absolutely fine, all I need is to add a simple image to each digit of the counter.
This is the script:
(function ($) {
$.fn.countTo = function (options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function () {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof (options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof (options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
我用我的css定制了它( (下面的CSS):
I've customized it with my css (css below):
.countup {
text-align: right;
}
.total, .today {
color: #0A1927;
font-size: 52px;
font-weight: 200;
letter-spacing: 24px;
padding-left: 2px;
}
.dsh {
background: transparent url('../img/dash.png') repeat-x;
border-image-slice: 30;
background-size: 50px 60px;
margin-left: 5px;
margin-right: 5px;
}
下面是我的aspx页面的一部分:
below is a section of my aspx page:
<pre lang="xml"><header>
<div class="container">
<script type="text/javascript">
jQuery(function ($) {
$('.total').countTo({
from: 0,
to: "<%= totcount %>",
speed: 1000,
refreshInterval: 50,
onComplete: function (value) {
console.debug(this);
}
});
});
jQuery(function ($) {
$('.today').countTo({
from: 0,
to: "<%= todaycount %>",
speed: 1000,
refreshInterval: 50,
onComplete: function (value) {
console.debug(this);
}
});
});
</script>
<div>
<h2 class="countup">total <span class="dsh total"></span></h2>
<h2 class="countup">today <span class="dsh today"></span></h2>
</div>
</div>
</header>
但它没有给出理想的结果!!我知道我正试图以最贫穷的方式实现这一目标!我不知道如何在jquery中包含bg ..任何帮助都将不胜感激...
输出链接: http://www33.zippyshare.com/v/55761207/file.html [ ^ ]
ps totcount和todaycount是代码隐藏的值!!如果您测试它,可以用数字替换它!谢谢
But it does not give the desired result!! I know I am trying to achieve this in the poorest way possible! I have no idea how to include bg in jquery itself.. Any help would be appreciated...
output link : http://www33.zippyshare.com/v/55761207/file.html[^]
p.s. totcount and todaycount are values from codebehind!! You can replace it with a number if you test it!! Thanks
推荐答案
){
.fn.countTo = function (选项){
// 将默认插件设置与自定义选项合并
options =
.fn.countTo = function (options) { // merge the default plugin settings with the custom options options =
.extend({},
.extend({},
这篇关于将图像添加到计数器中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!