效果:发布时高度慢慢增大，透明度也同时变为100
思路：
1、创建li
2、li的值是从文本框获取的 li.innerHtml=txt.value;
3、清空文本框 txt.value='';
4、if判断如果没有内容的时候就appendChild插入，如果有内容就倒序插入。
5、用offsetHeight获取li高度，先把li高度设置为0，再通过运动框架设置li高度和透明度
JS代码：
View Code
1 <script> 2 window.onload=function() 3 { 4 var oUl=document.getElementById('ul'); 5 var aBtn=document.getElementById('btn'); 6 var oTxt=document.getElementById('txt'); 7 8 aBtn.onclick=function() 9 { 10 var oLi=document.createElement('li'); 11 oLi.innerHTML=oTxt.value; 12 oTxt.value=''; 13 14 if(oUl.children.length>0) //如果Li有内容 15 { 16 oUl.insertBefore(oLi,oUl.children[0]); //就在第一条内容前插入 17 } 18 else 19 { 20 oUl.appendChild(oLi); //如果没内容就在当前插入 21 } 22 23 oLiHeight=oLi.offsetHeight; 24 oLi.style.height='0'; 25 startMove(oLi,{height: oLiHeight,opacity: 100}); 26 }; 27 }; 28 </script>
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>仿微博发布内容</title> 6 <style> 7 *{margin:0;padding:0;} 8 ul{margin:0 auto;width:400px;height:400px;border:solid 1px #000;overflow:hidden;} 9 ul li{padding:4px;border-bottom:dotted 1px #ccc;list-style:none;filter:aplha(opacity:0);opacity:0;} 10 </style> 11 <script src="baseCommon.js"></script> 12 <script> 13 window.onload=function() 14 { 15 var oUl=document.getElementById('ul'); 16 var aBtn=document.getElementById('btn'); 17 var oTxt=document.getElementById('txt'); 18 19 aBtn.onclick=function() 20 { 21 var oLi=document.createElement('li'); 22 oLi.innerHTML=oTxt.value; 23 oTxt.value=''; 24 25 if(oUl.children.length>0) //如果Li有内容 26 { 27 oUl.insertBefore(oLi,oUl.children[0]); //就在第一条内容前插入 28 } 29 else 30 { 31 oUl.appendChild(oLi); //如果没内容就在当前插入 32 } 33 34 oLiHeight=oLi.offsetHeight; 35 oLi.style.height='0'; 36 startMove(oLi,{height: oLiHeight,opacity: 100}); 37 }; 38 }; 39 </script> 40 </head> 41 42 <body> 43 <textarea cols="40" rows="4" id="txt"></textarea> 44 <input type="button" value="发布" id="btn" /> 45 <ul id="ul"> 46 </ul> 47 </body> 48 </html>