1

我正在尝试仅使用 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);​
4

3 回答 3

2

因为您没有更新bottom. 总是如此10

试试这个，

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+(b)+'px;');
},20);​
于 2012-10-09T20:48:01.267 回答
0

见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属性，则会删除使用属性和属性添加到元素的先前样式style。

于 2012-10-09T20:48:45.697 回答
0

干得好！ http://jsfiddle.net/thewebguy/H7GSF/2/

你只需要改变b变量

于 2012-10-09T20:49:12.683 回答