左右连续移动div

我一直在试图让这个javascript动画工作几个小时，而我什么都没有。问题是没有让我的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效果：http://jqueryui.com/docs/effect/ – 2011-02-14 02:05:58

另外，您可以使用http://en.wikipedia.org/wiki/Marquee_element与行为=“备用” – kirilloid 2011-02-14 02:11:59

这样的代码总是对我的作品：

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

这可以给一个想法，如何使用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

回答

相关问题