Question

我目前正在使用以下javascript，如下所示。当我在div .image_scroll_3中放置文本时，它运行良好，但是当我插入图像时，滚动毛刺并且不会移动到图像的顶部。

非常感谢任何建议

JS

  <script>
  (function($, undefined) {
  $.fn.loopScroll = function(p_options) {
  var options = $.extend({
    direction: "upwards",
    speed: 60
  }, p_options);

  return this.each(function() {
  var obj = $(this).find(".image_scroll_2");
  var text_height = obj.find(".image_scroll_3").height();
  var start_y, end_y;
  if (options.direction == "downwards") {
    start_y = -text_height;
    end_y = 0;
  } else if (options.direction == "upwards") {
    start_y = 0;
    end_y = -text_height;
  }

  var animate = function() {
    // setup animation of specified block "obj"
    // calculate distance of animation    
    var distance = Math.abs(end_y - parseInt(obj.css("top")));

      //alert("animate " + obj.css("top") + "-> " + end_y + " " + distance);

    //duration will be distance / speed
    obj.animate(
      { top: end_y },  //scroll upwards
      1500 * distance / options.speed,
      "linear",
      function() {
          // scroll to start position
          obj.css("top", start_y);
          animate();    
      }
    );
  };

  obj.find(".image_scroll_3").clone().appendTo(obj);
  $(this).on("mouseout", function() {
    obj.stop();
  }).on("mouseout", function() {
    animate(); // resume animation
  });
  obj.css("top", start_y);
  animate(); // start animation

  });
  };
  }(jQuery));

  $("#example4").loopScroll({ speed: 700 });
  </script>

Answer 1

我认为问题是您的text_height是在图像实际加载到.image_scroll_3元素之前计算出来的。因此，您需要等待图片加载。

将loopScroll来电置于$(window).load内，如此：

$(window).load(function(){
    $('#example4').loopScroll({speed:700});
});

现在应该消除那么大的故障，因为上面的修复应该有助于缓解它。

然而，仍有一些不受欢迎的 jank / 口吃（不要再次使用毛刺这个词，让我们继续如果你注意到，那么所有图像的移动都保留了初始问题）我猜这可能是因为我们对整个事物的动画太快了。像100或200那样传递速度解决了这个问题，但这不是一个真正的解决方案，因为理想情况下，你应该能够放入任何速度值，它应该只是产生平滑的动画。

我正在研究完全相同的事情，但在此之前，我想知道故障的上述修复是否对您有帮助，我们终于完成了它？让我知道。

<强>更新

以前我提到my version，供你细读。

因为您要做的就是以非常线性的方式循环图像，所以，我认为不需要依赖jQuery的animate()函数。我使用了requestAnimationFrame API。事实上，在我下面的演示中，我完全抛弃了jQuery而不支持vanilla JavaScript，因为我一直在寻找替代我们在这个演示中需要做的所有事情。但当然，这也是一个非常主观的问题;一个品味的东西;所以，如果你想使用jQuery，那么无论如何。

我带来的另一个根本性改变不是更新top值，而是使用更新translateY值。

看看这个jsFiddle并告诉我它是否符合您的需求。

JavaScript代码如下：

// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var main=null;
var imageScroll2=null;
var imageScroll3=null;
var totalHeight=null;
var initY=null;
var destY=null;
var currY=null;
var increment=null;
var direction=null;
var UP=null;
var DOWN=null;
var isPlaying=null;
function init(){
    main=document.getElementById('example4');
    imageScroll2=main.getElementsByClassName('image_scroll_2')[0];
    imageScroll3=main.getElementsByClassName('image_scroll_3')[0];
    totalHeight=imageScroll3.clientHeight;
    UP='upwards';
    DOWN='downwards';
    isPlaying=true;
    direction=UP;
    increment=10;
    if(direction===DOWN){
        initY= -totalHeight;
        destY=0;
    }else{
        initY=0;
        destY= -totalHeight;
    }
    currY=initY;
    imageScroll2.appendChild(imageScroll3.cloneNode(true));
    if(imageScroll2.addEventListener){
        imageScroll2.addEventListener('mouseover',function(){isPlaying=false;},false);
        imageScroll2.addEventListener('mouseout',function(){isPlaying=true;},false);
    }else{
        imageScroll2.attachEvent('onmouseover',function(){isPlaying=false;});
        imageScroll2.attachEvent('onmouseout',function(){isPlaying=true;});
    }
    requestAnimFrame(render);
}
function render(){
    if(isPlaying){
        imageScroll2.style.transform='translate(0px,'+currY+'px)';
        if(direction===DOWN){
            currY+=increment;
            if(currY>=destY){currY=initY;}
        }else{
            currY-=increment;
            if(currY<=destY){currY=initY;}
        }
    }
    requestAnimFrame(render);
}
//
init();

无限滚动div故障与图像

1 个答案: