大佬教程收集整理的这篇文章主要介绍了jquery – 在视口中动画计数器,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个fiddle here,显示滚动似乎影响计数器号码.
$(document).ready(function() { $(function($,win) { $.fn.inViewport = function(cb) { return this.each(function(i,el) { function visPx() { var H = $(this).height(),r = el.getBoundingClientRect(),t = r.top,b = r.bottom; return cb.call(el,Math.max(0,t > 0 ? H - t : (b < H ? b : H))); } visPx(); $(win).on("resize scroll",visPX); }); }; }(jQuery,window)); $(".fig-number").inViewport(function(pX) { $(this).each(function() { $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 1000,step: function(Now) { $(this).text(Math.ceil(Now)); } }); }); }); });
我尝试过多件事情,但我似乎无法实现我所追求的目标.
$(document).ready(function() { $(function($,win) { $.fn.inViewport = function(cb) { return this.each(function(i,el) { function visPx() { var H = $(this).height(),b = r.bottom; return cb.call(el,t > 0 ? H - t : (b < H ? b : H))); } visPx(); $(win).on("resize scroll",visPX); }); }; }(jQuery,window)); $(".fig-number").inViewport(function(pX) { $(this).each(function() { $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 1000,step: function(Now) { $(this).text(Math.ceil(Now)); } }); }); }); });
html,body { height: 100%; } #upper-push { height: 100%; width: 100%; display: block; BACkground: red; color: white; }
<div id="upper-push"> Scroll down </div> <div id="numbers"> <span class="fig-number">25</span> <span class="fig-number">78</span> </div>
在“plugin page”你可以看到如何使用它:
$("SELEctor").inViewport(function(pX) { console.log( px ); // `px` represents the amount of visible height if(pX){ // do this if element enters the viewport // px > 0 }else{ // do that if element exits the viewport // px = 0 } }); // Here you can chain other jQuery methods to your SELEctor
这意味着:
>你必须收听px参数大于0(元素在视口中)
>为了防止链接额外的动画创建累积,你应该使用一个标志变量
>(回调中的$(this).each()不需要,插件已经在元素集合上运行了.)
jQuery(function($) { // DOM ready and $in scope $(".fig-number").inViewport(function(pX) { // if px>0 (entered V.port) and // if prop initNumAnim flag is not yet set = Animate numbers if(px>0 && !this.initNumAnim) { this.initNumAnim = true; // Set flag to true to prevent re-running the same animation // <<< DO SOME COOL stuFF HERE! } }); });
// inViewport jQuery plugin // https://stackoverflow.com/a/26831113/383904 $(function($,win) { $.fn.inViewport = function(cb) { return this.each(function(i,el){ function visPx(){ var H = $(this).height(),t=r.top,b=r.bottom; return cb.call(el,t>0? H-t : (b<H?b:H))); } visPx(); $(win).on("resize scroll",visPX); }); }; }(jQuery,window)); jQuery(function($) { // DOM ready and $in scope $(".fig-number").inViewport(function(pX) { // Make use of the `px` argument!!! // if element entered V.port ( px>0 ) and // if prop initNumAnim flag is not yet set // = Animate numbers if(px>0 && !this.initNumAnim) { this.initNumAnim = true; // Set flag to true to prevent re-running the same animation $(this).prop('Counter',step: function (Now) { $(this).text(Math.ceil(Now)); } }); } }); });
html,body { height:100%; } #upper-push { height:100%; width:100%; display:block; BACkground:red; color:white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="upper-push"> Scroll down </div> <div id="numbers"> <span class="fig-number">25</span> <span class="fig-number">78</span> </div>
以上是大佬教程为你收集整理的jquery – 在视口中动画计数器全部内容,希望文章能够帮你解决jquery – 在视口中动画计数器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。