Javascript Animate Bottom

Question

我正在尝试使用javascript（NO JQUERY）从页面底部浮动div。

我有一个小提琴：http://jsfiddle.net/H7GSF/

它向上移动一次但不会迭代以创建“动画”。

HTML

<div id="block"></div>​

CSS

#block { position: fixed; background: red; width: 100px; height: 20px; bottom: 0; }​

JS

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+(b)+'px;');
},20);​

Answer 1

因为您没有更新bottom的值。它总是10

试试这个，

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+(b)+'px;');
},20);​

Answer 2

请参阅http://jsfiddle.net/H7GSF/1/

只需使用

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+b+'px;');
},20);

问题在于b是不变的！

此外，我认为使用style属性而不是style属性更好地修改样式（并且它更短）：

el.style.bottom=b+'px;'

请注意，如果您使用style属性，则会使用attributte和属性style删除添加到元素中的先前样式。

Answer 3

你走了！ http://jsfiddle.net/thewebguy/H7GSF/2/

您只需要更改b变量