無限滾動的div與

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

我認爲這個問題是這些圖像是實際加載您.image_scroll_3元素中之前你text_height計算。所以你需要等待圖像加載。

將一個$(window).load裏面你loopScroll調用就像這樣：

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

那巨大的毛刺現在應該走了如上的修復程序應有助於減輕它。

然而，仍然有一些不需要JANK/口吃（不想再使用這個詞毛刺，讓我們把它保留了最初的問題）中的所有圖像的運動，如果你發現和我猜這可能是因爲我們太快地動畫整個事情。通過速度像100或200可以解決這個問題，但這不是一個真正的解決方案，因爲理想情況下，您應該能夠輸入任何值，並且它應該只是生成平滑的動畫。

我正在研究完全相同的事情，但在此之前，我想知道如果上述修復程序故障幫助您，我們終於完成了它？讓我知道。

更新：

這裏是my version我前面講的，請過目。

因爲你所要做的只是循環圖像中的一個非常線性時尚，我認爲沒有必要依靠jQuery的animate()函數。我用槓桿代替了​​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();