window.onload = function() {
var oA = document.getElementById('box');
var oB = document.getElementById('tijiao');
var oC = document.getElementById('ul1');
oB.onclick = function() {
var oLi = document.createElement('li'); //createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念!
oLi.innerHTML = oA.value;
var aLi = document.getElementsByTagName('li');
if (aLi.length > 0) {
oC.insertBefore(oLi, aLi[0]); //iE不兼容,因为找不到aLi[0],所以不知道往谁前面加
} else {
oC.appendChild(oLi);
}
//运动
var iHeight = oLi.offsetHeight - 2;
oLi.style.height = '0';
startMove(oLi, {
height: iHeight
}, function() {
startMove(oLi, {
opacity: 100
})
})
}
}
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
//startMove(oDiv, {width: 400, height: 400})
function startMove(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true; //假设:所有值都已经到了
for (var attr in json) {
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - cur) / 2;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[attr]) {
bStop = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[attr] = cur + speed + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd();
}
}
}, 30);
}