계속 div 왼쪽/오른쪽으로 계속 이동

저는이 자바 스크립트 애니메이션을 몇 시간 동안 사용할 수있게하려고 노력해 왔습니다. 문제는 왼쪽에서 오른쪽으로 (또는 위에서 아래로) 이동하는 div 상자를 가져 오지 못합니다. 문제가있는 각 사례의 반대입니다. 여기에 내가 지금까지 가지고있는 것들이 있습니다. (또한, 움직이는 상자가 뷰 윈도우 내에 포함되도록 경계를 설정했습니다. 그래서 측면 중 하나를 치면 반대 방향으로 움직여야합니다.) 어떤 도움이이 시점에서 최고입니다.계속 div 왼쪽/오른쪽으로 계속 이동

참고 : 다음 단계는 상자에 튀는 효과를 만드는 것입니다. 그러나 일단 간단한 애니메이션 작업을하면 걱정할 것입니다. 이 같은

 setInterval(function(){ 


    if(parseInt(box.style.left) > parseInt(viewDim.width - 57)){ 

     box.style.left -= parseInt(box.style.left) - 2 + 'px'; 



    /* } else if(parseInt(box.style.left) < 0){ 

     //debug_log("HIT!!"); 
     //parseInt(box.style.left) += 2 + 'px'; 

    } else if(parseInt(box.style.top) > parseInt(viewDim.height-58)){ 



    } else if(parseInt(box.style.top) < 0){*/ 



    } else { 

     box.style.left = parseInt(box.style.left) + 2 + 'px'; 
     //box.style.top = parseInt(box.style.top) + 5 + 'px'; 
    } 

}, 20);

출처

2011-02-14 NinjaCode

학습 연습이 아니라면 jQuery UI Effects를 제안합니다. http://jqueryui.com/docs/effect/ –

또한 http://en.wikipedia.org/wiki/Marquee_element를 사용할 수 있습니다. 행동 = "대체" – kirilloid

코드는 항상 나를 위해 작동 :

var boxWidth = 57, delta = 2; 
setInterval(function(){ 
    var left = parseInt(box.style.left); 
    if(left >= parseInt(viewDim.width - boxWidth)){ 
    delta = -2; 
    } 
    if (left <= 0) { 
    delta = 2; 
    } 
    box.style.left = left + delta + 'px'; 
}, 20);

출처

2011-02-14 02:07:29 kirilloid

고마워요! 나는 그것을 조금 조정해야했다. 그러나 그것은 그것이 지금 일하고있다. – NinjaCode

이 아이디어를 제공 할 수 있습니다, jQuery를

http://jsfiddle.net/rFkpy/

$('#myDiv').click(function() { 
    $(this).animate({ 
    left: '+=250' 
    }, 1500, "easeOutBounce", function() { 
    // callBack 
    }); 
});

출처

2011-02-14 02:22:44

그것을 수행하는 방법, 당신은 비록 당신의 지금 해결책을 찾지 못해 완전한 코드를 만들 수 없다. here.

바운싱 박스는 부모 요소 내부에서 튀어 오릅니다. IE8, FF3 및 Opera11에서 테스트되었습니다.

출처

2011-02-14 02:59:30 nxasdf

계속 div 왼쪽/오른쪽으로 계속 이동

답변

관련 문제