0

仅用于解释目的。实际代码看起来不同。

我已经让图像在容器内很好地滚动。上下循环。看起来很棒。但是，如果我改变容器的高度（由我的媒体查询调用），那么计算就会不同步。我想重置滚动，但它不起作用。我也尝试过类似 scrollingImage.css({transform: 'translateY(0px)'}); 在停止动画之后并在重新调整大小之前重新启动它，但没有运气。如果我以新的大小重新加载页面（所以容器是 300 而不是 500）它会很好用。但如果它在浏览器调整大小时即时发生，则不会。任何帮助将不胜感激。

  /********** THE CSS **********/
  .container{
    background-color: red;
    height: 400px;
    width: 400px;
    overflow: hidden;
  }
  .container img{
      width: 100%;
      height: auto;
  }
  @media all and (max-width: 400px) {
    .container{
      height: 200px;
      width: 200px;
    }
  }


  /********** THE HTML **********/
  <div class="container">
      <img src="http://upload.wikimedia.org/wikipedia/commons/7/76/Rope_swing_really_tall_Summit_NJ.jpg"/>
  </div>


  /********** THE JAVASCRIPT (jquery and velocity already loaded) **********/
  function enableScrollingContent() {
    var container = $('.container');
    var scrollingImage = container.find('img');
    scrollingImage.velocity("stop", true);
    var offsetY = -scrollingImage.height() + (container.height());
    scrollingImage.velocity({ translateY: offsetY }, { duration: 5000, loop: true });
  }
  enableScrollingContent();
  $(window).resize(enableScrollingContent);
4

0 回答 0