Javascript动画底部

Question

我想从页面底部仅使用javascript（无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变量