배경의 현재 위치를 기준으로하는 시차

시차 효과를 만들려고하는데 (약간 효과가 있지만) 작은 문제가 있습니다. 요소의 현재 위치에서 상대적 인 시차 대신에 0으로 점프합니다. 어떻게 시차를 현재 위치와 관련하여 위치에 적용 할 수 있습니까?배경의 현재 위치를 기준으로하는 시차

$("#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 축을 따라 움직일 때 산발적으로 점프하지 마십시오. 점프가 훨씬 더 실질적 이길 원한다면이 값을 조정할 수있는 작은 변화가 될 것입니다. 그 위에, 원래의 CSS에서는 배경의 위치가 중앙에 위치하기 때문에 50을 더합니다.이 값은 우연히 50 %의 값을 나타냅니다.

희망 사항은 좋았습니다.

출처

2013-05-26 23:35:12 Majo0od

배경의 현재 위치를 기준으로하는 시차

답변

관련 문제