如果需要，JQuery設置爲下移並滾動

我想要做的是使用動畫（左或右）在屏幕上移動一個圓，然後當然是上/下，我可以做。

問題是，當我希望瀏覽器在需要時以上下滾動的方式進行滾動，並且平滑地進行。

這是一些簡單快速的骯髒的代碼我寫的只是周圍的混亂

$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){ 
     $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){ 
      $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){ 
       $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){ 
       }); 
      }); 
     }); 
    });

在哪裏/如何將我讓它滾動，任何建議小費，我計劃讓我有以下反正代碼的車程。

來源

2012-06-08 Sukh

因此，當瀏覽器開始滾動時，您希望它沿着瀏覽器移動的圓圈動畫。我是否正確理解這一點？ – Ohgodwhy

也許你可以得到靈感havign看看jQuery的scrollintoview插件。它平滑地滾動頁面以顯示重點控制。 – JotaBe

這是一個工作的解決方案，根據您的動畫序列：

看到這個working Fiddle例子！

HTML

<div id="circle"></div>

CSS^{標準化的小提琴，但不相關}

html, body { 
    width: 100%; 
    height: 100%; 
} 
#circle { 
    width: 20px; 
    height: 20px; 
    background-color: #444; 
    border: 1px solid #212121; 
    border-radius: 10px; 
    position: absolute; 
    top: 300px; 
    left: 300px; 
}

jQuery的^{您需要的插件.watch()，見下面的鏈接}

// initial values to your variables 
var start  = 0, 
    stopRight = 1000, 
    downRight = 300, 
    leftRight = 300; 

// your code as it was 
$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){ 
    $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){ 
    $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){ 
     $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){}); 
    }); 
    }); 
}); 

// the code to make it all happen! 
$('#circle').watch("left,top", function() { 
    $("html, body").animate({ 
     scrollTop : $('#circle').offset().top, 
     scrollLeft : $('#circle').offset().left, 
    }, 20); 
}, 100);

插件使用

jQuery CSS Property Monitoring Plug-in

這樣做是跟蹤元素的運動和操縱的滾動條，以保持它在任何時候都可見。

jQuery .scrollTop()^{獲取匹配元素集中第一個元素的滾動條的當前垂直位置。}

jQuery .scrollLeft()^{獲取匹配元素集中第一個元素的滾動條的當前水平位置。}

jQuery .offset()^{獲取匹配元素集合中第一個元素相對於文檔的當前座標。}

來源

2012-06-09 00:07:10 Zuul

如果需要，JQuery設置爲下移並滾動

回答

相關問題