如何實現自動滾動以跟隨我的div

Question

我已經在線查看了幾個教程和一些類似的問題，但是沒能弄清楚如何讓屏幕左右自動滾動，以便我的#sheep保持在屏幕的中心。

我正在使用javascript和jquery在屏幕上移動一個簡單的div。

這是我的jsfiddle

http://jsfiddle.net/JosephByrne/CkkVr/

使屏幕跟隨我的div的最佳方法是什么？

Answer 1

我認為你試圖左/右移動錯誤的元素。 我想你需要把你的羊留在屏幕中間然后移動背景。

就像是：

var walkLeft = function() {
    $('#background').animate({left:"-=10px",top:"-=2px"}, 100);
    $('#background').animate({left:"-=10px",top:"+=2px"}, 100);
};

var walkRight = function() {
    $('#background').animate({left:"+=10px",top:"-=2px"}, 100);
    $('#background').animate({left:"+=10px",top:"+=2px"}, 100);
};

http://jsfiddle.net/CkkVr/22/ （你需要“向右跳”才能看到羊），但是你得到了一般的想法！

Answer 2

你需要類似的東西：

function scrollContainer() {
    var $sheep = $("#sheep");
    $("body").scrollLeft($sheep.position().left + $sheep.width());
}

這利用了jQuery的scrollLeft()函數以及position()函數（在綿羊上）。

---

你只需要繼續搞亂數學，直到它正確運行...

我在這里實現了“跳轉”功能： http ： //jsfiddle.net/Dxe8a/11/

function scrollContainer() {
    var $sheep = $("#sheep");
    var $body = $("body");
    var windowWidthOver2 = ($(window).width()/2);
    var pos = $sheep.position().left + windowWidthOver2 - $sheep.width() - 80;
    if($body.width() <= (pos + windowWidthOver2 - $sheep.width() - 80)) {
        $body.width($body.width() + windowWidthOver2);
    }
    $body.scrollLeft(pos);
}

你應該改變它以使它看起來好一點，但至少它會跟你的羊有所不同。

如果你在“/ show”中查看它，它在小提琴中效果更好： http ： //jsfiddle.net/Dxe8a/11/show