視差相對於背景的當前位置

我試圖創建一個視差效果（這很好用），但是有一個小問題。而不是視差與元素當前位置相對，它會跳到0.我怎樣才能讓視差影響它相對於當前位置的位置？視差相對於背景的當前位置

這裏是我的javascript：

$("#caveConfron").mousemove(function(e){ 
    var x = e.pageX - this.offsetLeft; 

    var alreadyY = $("#caveConfron").css("backgroundPositionY"); 

    $("#caveConfron").css({"backgroundPosition":-(x/85)+"% 0%"}); 
});

和我的元素的CSS：

#caveConfron{ 
    width:242px; 
    height:344px; 
    border:5px solid black; 
    background:url('../img/caveConfrontBg.jpg') no-repeat center top; 
    position:relative; 
}

這裏是發生了什麼一個例子：http://jsfiddle.net/gNCjS/

來源

2013-05-26 Majo0od

你能否提供一個演示來更好地展示它在做什麼與你期望它做什麼？ – Mathletics

只是舉了一個例子。 – Majo0od

對不起，我很難理解你想要做什麼。你是否試圖阻止在'mouseenter'上跳轉的背景？ – Mathletics

多次試驗之後，我想通了問題。

首先，當鼠標碰到div的中心時，x的鼠標位置值應該是「0」。所以這是我做過什麼，而不扭捏CSS：

$("#caveConfron").mousemove(function(e){ 
    var x = e.pageX - this.offsetLeft; 

    var reduce = $(this).width()/2; 

    $("#caveConfron").css({"backgroundPosition":(((-x+reduce)/55)+50)+"% 0%"}); 
});

變量reduce獲取div的寬度的一半。然後，我得到變量x的負數，同時將它加到reduce的值，所以如果x的鼠標位置超過div的一半，它將變爲正值，所以中間將永遠爲「0」。然後我將55分開，這樣它在x軸上移動時就不會偶爾跳起來，這將是一個小小的改變（如果你希望跳躍更加實質化，可以隨意調整這個值;因爲我的目的很棒）。最重要的是，我添加了50個，因爲在我原來的CSS中，背景的位置居中，巧合地將該值（數量上）置於50％。

希望我的解釋很好！

來源

2013-05-26 23:35:12 Majo0od

視差相對於背景的當前位置

回答

相關問題