我想使用“ counterUp”插件创建计数器。正如您在我的html文件中看到的那样,它将出现在动画圆圈的中间。当我像这样在我的.js文件中单独调用该插件时,它可以完美运行:
$('.counter').counterUp({
delay: 10,
time: 1500
});
重点是,我想使用jquery航路点触发计数。所以我确实是这样的:
$(".counter").waypoint({
element: this,
handler:
function(direction) {
$(this.element).counterUp({
delay: 10,
time: 1500
});
this.destroy();
},
offset: '70%'
});
这是我的html文件:
<svg height="120" width="120">
<circle class="ring" fill="none" stroke="#eeeeee" stroke-width="8" cx="60" cy="60" r="50"/>
<circle class="percentage stat" fill="none" stroke="#53ba00" stroke-width="8" cx="60" cy="60" r="50" value="540"/>
<text class="counter" x="50%" y="50%" font-size="20px" text-anchor="middle" dy=".3em" value="54">54</text>
Sorry, your browser does not support inline SVG.
</svg>
<svg height="120" width="120">
<circle class="ring" fill="none" stroke="#eeeeee" stroke-width="8" cx="60" cy="60" r="50"/>
<circle class="percentage stat" fill="none" stroke="#53ba00" stroke-width="8" cx="60" cy="60" r="50" value="45"/>
<text class="counter" x="50%" y="50%" font-size="20px" text-anchor="middle" dy=".3em" value="78">78</text>
Sorry, your browser does not support inline SVG.
</svg>
<svg height="120" width="120">
<circle class="ring" fill="none" stroke="#eeeeee" stroke-width="8" cx="60" cy="60" r="50"/>
<circle class="percentage stat" fill="none" stroke="#53ba00" stroke-width="8" cx="60" cy="60" r="50" value="45"/>
<text class="counter" x="50%" y="50%" font-size="20px" text-anchor="middle" dy=".3em" value="800">800</text>
Sorry, your browser does not support inline SVG.
</svg>
这样做,我遇到以下错误:
jquery.waypoints.js:271 Uncaught RangeError: Maximum call stack size exceeded
at Context.handleScroll (jquery.waypoints.js:271)
at Context.refresh (jquery.waypoints.js:367)
at Context.add (jquery.waypoints.js:216)
at new Waypoint (jquery.waypoints.js:43)
at SVGTextElement.<anonymous> (jquery.waypoints.js:648)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.waypoint (jquery.waypoints.js:641)
at SVGTextElement.<anonymous> (jquery.counterup.js:8)
at Function.each (jquery-3.2.1.min.js:2)