左右连续移动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);
答
这样的代码总是对我的作品:
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);
答
这可以给一个想法,如何使用jQuery
$('#myDiv').click(function() {
$(this).animate({
left: '+=250'
}, 1500, "easeOutBounce", function() {
// callBack
});
});
除非这是一个学习练习,否则我会建议使用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