Question

基本上，我想根据滚动位置动态地将.show类添加到.container中的图像。我想在一些职位之后改变班级。

＆＃13;

$(document).ready(function() {
  var container = $('#container'),
    nImg = 0; // active picture
  imgNum = $('#container img').length;
  var topDiv = (container).offset() || {
    "top": NaN
  }).top;

$(window).bind('scroll', function() {
  var y = $(this).scrollTop();
  if (y > topDiv) {
    nImg++;
  } else {
    nImg--;
  }
  if (nImg >= imgNum) {
    nImg = 0;
  }
  if (nImg < 0) {
    nImg = imgNum - 1;
  }

  $(".animated").each(function() {
    $(this).removeClass("show")
  });
  $(".animated").eq(nImg).addClass("show");
});
});

＆＃13;

.animated {
  display: none;
}
.show {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:200px"></div>
<div id="container">
  <img src="http://i.imgur.com/2oVbl7z.png" class="animated show" />
  <img src="http://i.imgur.com/S5s0Mv1.png" class="animated" />
  <img src="http://i.imgur.com/0vBEXL7.png" class="animated" />
  <img src="http://i.imgur.com/ffg7v9n.png" class="animated" />
  <img src="http://i.imgur.com/9FD5kdE.png" class="animated" />
</div>

＆＃13;

如果你慢慢滚动，你会发现它确实有效，但速度太快 - 这就是问题所在。我只是慢慢地移动，并希望从某个位置开始。

Answer 1

有关如何在页面滚动时为序列图像设置动画的示例，请参阅以下示例。

$(document).ready(function () {
    $('.aniScrollContainer').aniScroll({});
});

.aniScrollContainer {
    height:300px;
    background-color:#a1a1a1;
}

.myAniScrollContainer200 {
    height:200px;
}


#header {
    display: block;
    height: 500px;
    width: 100%;
    background-color:#e0e0e0;
}
.gap {
    display: block;
    height: 100px;
    width: 100%;
    background-color:#e0e0e0;
}
#footer {
    display: block;
    height: 1500px;
    width: 100%;
    background-color:#e0e0e0;
}


.aniScrollContainer {
    position: relative;
    height: 100px;
}

.aniScrollContainer img.animated {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.durley.net/animate-on-scroll/js/aniscroll.js"></script>

<div id="header"></div>
<div class="aniScrollContainer myAniScrollContainer">
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-01.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-02.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-03.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-04.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-05.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-06.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-07.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-08.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-09.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-10.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-11.jpg"/>
  <img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-12.jpg"/>
</div>
<div id="footer"></div>

Answer 2

有关如何限制更改频率的示例，请参阅this jsFiddle。

function animationTimer(){
    canChange = true;
}

$(window).bind('scroll', function() {
    if(canChange)
    {
        canChange = false;
        setTimeout(animationTimer, 250);
        // ...
    }
});

这将允许图像每250毫秒更改一次，因此将250更改为适合您的数字以限制其更改的速度。

Answer 3

您可以使用sleep function（setTimeout）在操作之间等待一段时间。并且为了确保不会执行超过1次，您可以使用信号量到lock 关键区域。

在下面的示例中，我添加并删除了一个类（这是信号量）。我利用setTimeout等待一段时间来执行该代码。

＆＃13;

$(document).ready(function () {
  var container = $('#container'),
    nImg = 0;    // active picture
    imgNum = $('#container img').length;
  var topDiv = ((container).offset() || { "top": NaN }).top;

 $(window).bind('scroll', function() {
   if(!container.hasClass('lock')) {
		container.addClass('lock');
        setTimeout(function() {
		var y = $(this).scrollTop();        
		if(y>topDiv){
			 nImg++;   
		}else{
			 nImg--;   
		}
		if(nImg>=imgNum){ nImg = 0; }
		if(nImg<0){ nImg = imgNum-1; }

		$(".animated").each(function(){ 
			$(this).removeClass("show")            
		});
		$(".animated").eq(nImg).addClass("show");
		
		container.removeClass('lock');
      },200);
   }
 });
});

＆＃13;

.animated { display: none;}
.show { display: block;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:200px"></div>
 <div id="container">
  <img src="http://i.imgur.com/2oVbl7z.png" class="animated show" />
  <img src="http://i.imgur.com/S5s0Mv1.png" class="animated" />
  <img src="http://i.imgur.com/0vBEXL7.png" class="animated" />
  <img src="http://i.imgur.com/ffg7v9n.png" class="animated" />
  <img src="http://i.imgur.com/9FD5kdE.png" class="animated" />
</div>

＆＃13;

注意：您可以更改setTimeout的值以符合您的速度需求。

通过滚动

3 个答案: