向上滚动并向下滚动事件

时间:2017-12-22 06:15:14

标签: jquery html css

下面是我的代码,在这个代码中我的数字计数器是在我按下按钮时启动但我想在我向上滚动时比计数器达到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>

3 个答案:

答案 0 :(得分:1)

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

如果您想阅读更多Here's the link

,可以在jQuery中使用scrollTop();

&#13;
&#13;
            //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;
    });
}());
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

那是你在找什么?

&#13;
&#13;
            //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;
    });
}());
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你好我再次编辑它现在它几乎没有问题,但可能会帮助你

&#13;
&#13;
    //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;
    });
}());
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;