jquery - 向上滚动和向下滚动事件

Question

下面是我的代码，在这段代码中，当我将鼠标悬停在按钮上时，我的数字计数器会启动，但我希望当我向上滚动时计数器达到 1 到 30，当我向下滚动时计数器达到 30 到 1。 请解决这个问题。 注意:移除mouseover和mouseout事件添加滚动事件

            //Instantiate and get the instance from the element's data-spriteClip property
            var instance = $(".awesome-button").spriteClip({
                totalFrames: 30,
                frameRate: 60,
                stops: [1, 30]
            }).data("spriteClip");

            //Equivalent to
            //var instance = new SpriteClip($(".awesome-button").get(0), {
            //    totalFrames: 30,
            //    frameRate: 60,
            //    stops: [1, 30]
            //})
            
            instance.$el
                .on("mouseover", function () {
                    
                    instance.play();
                })
                .on("mouseout", function () {
                    instance.rewind();
                });

            instance.$dispatcher
                .on(SpriteClip.Event.ENTER_FRAME, function (e, clip) {

                    $(".currentFrame span").text(instance.currentFrame);
                });

.awesome-button {
display: block;
width: 60px;
height: 60px;
background: url("http://www.clker.com/cliparts/0/5/7/9/1195435734741708243kuba_arrow_button_set_2.svg.hi.png") no-repeat 0 0;
margin-bottom: 1em;
border: 1px solid #ccc;
}
.currentFrame{
    position: fixed;
    top: 0;
    left:0;
    display: block;
}
body{
    height:5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Frame-By-Frame-Sprites-Animations-SpriteClip-js/dist/spriteclip.js"></script>
<a class="awesome-button"></a>
<div class="currentFrame">Current frame: <span>1</span></div>

Answer 1

这就是您要找的东西吗？

            //Instantiate and get the instance from the element's data-spriteClip property
            var instance = $(".awesome-button").spriteClip({
                totalFrames: 30,
                frameRate: 60,
                stops: [1, 30]
            }).data("spriteClip");

            //Equivalent to
            //var instance = new SpriteClip($(".awesome-button").get(0), {
            //    totalFrames: 30,
            //    frameRate: 60,
            //    stops: [1, 30]
            //})
            
            instance.$el
                .on("mouseover", function () {
                    
                    instance.play();
                })
                .on("mouseout", function () {
                    instance.rewind();
                });

            instance.$dispatcher
                .on(SpriteClip.Event.ENTER_FRAME, function (e, clip) {

                    $(".currentFrame span").text(instance.currentFrame);
                });(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){

         $('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.attr('data-stop') }, {
    duration: 1000,
    easing: 'swing',
    step: function (now) {
      $this.text(Math.ceil(now));
    }
  });
});

       } else {
           $('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 30 }).animate({ Counter: $this.attr('data-to') }, {
    duration: 1000,
    easing: 'swing',
    step: function (now) {
      $this.text(Math.ceil(now));
    }
  });
});       
         
      
       }
       previousScroll = currentScroll;
    });
}());

.awesome-button {
display: block;
width: 60px;
height: 60px;
background: url("http://www.clker.com/cliparts/0/5/7/9/1195435734741708243kuba_arrow_button_set_2.svg.hi.png") no-repeat 0 0;
margin-bottom: 1em;
border: 1px solid #ccc;
}
.currentFrame{
    position: fixed;
    top: 0;
    left:0;
    display: block;
}
body{
    height:5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Frame-By-Frame-Sprites-Animations-SpriteClip-js/dist/spriteclip.js"></script>
<a class="awesome-button"></a>
<div class="currentFrame">Current frame: <span class="Count" data-stop="30" data-to="0">0</span></div>