16.仿微博效果

点击按钮，在页面中显示输入框中的内容，内容显示效果为：

1.内容的高度从0到相应内容高度；

//运动
var iHeight=oLi.offsetHeight;//用一个变量储存内容应有的高度。

oLi.style.height='0';//再将高度设置为0；

然后通过运动，让高度从0变为变量中储存的高度；

2,内容的透明度从0到100；

使用完美运动框架；

js代码：

<script src="move2.js"></script>//导入完美运动框架；
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var oTxt=document.getElementById('txt1');
    
    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        
        oLi.innerHTML=oTxt.value;
        oTxt.value='';
        
        if(oUl.children.length>0)
        {
            oUl.insertBefore(oLi, oUl.children[0]);
        }
        else
        {
            oUl.appendChild(oLi);
        }
        
        //运动
        var iHeight=oLi.offsetHeight;
        
        oLi.style.height='0';
        
        startMove(oLi, {height: iHeight}, function (){
            startMove(oLi, {opacity: 100});
        });
        //alert(iHeight);
    };
};
</script>

css:

<style>
* {margin:0; padding:0;}
#ul1 {width:400px; height:400px; border:1px solid black; margin:10px auto; overflow:hidden;}
#ul1 li {border-bottom:1px #999 dashed; padding:4px; list-style:none; overflow:hidden; filter:alpha(opacity:0); opacity:0;}
</style>