在向上滚动并向下滚动活动

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>

Answer 2

https://jsfiddle.net/liamm12/xse8o9dr/1/

如果您想阅读更多信息，可以在jQuery中使用scrollTop();。

            //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){
          $('.currentFrame').text('currentFrame down').css('color','green');
       } else {
          $('.currentFrame').text('currentFrame up').css('color','red');
       }
       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>1</span></div>

Answer 3

你好，我现在只是编辑它几乎没有问题，但也许会帮助您

    //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;
    var minLength = 0;
    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
       
       	$('#counter').text(Number($('#counter').text())+1);
var item = $('#counter');
for (var i = 0; i <= item.length; i++) {
       if ($(item[i]).text() == '31') {
              $(item[i]).text('30');
          }
     }
       } else {
       	$('#counter').text(Number($('#counter').text())-1);
        
     }
       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 id="counter" >0</span>
</div>