<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> ul{margin:10px auto;padding:0;width:300px;height:400px;border:1px solid black;} li{list-style:none; border-bottom:dashed;filter:alpha(opacity=0);opacity:0;height:0;overflow:hidden;} </style> <script src='perfectStartMove.js'></script> <script> window.onload = function(){ var oText = document.getElementById('text1'); var oInput = document.getElementsByTagName('input')[0]; var oUl =document.getElementsByTagName('ul')[0]; oInput.onclick = function(){ var cLi = document.createElement('li'); cLi.innerHTML = oText.value; if(oUl.children[0]){ oUl.insertBefore(cLi,oUl.children[0]); }else{ oUl.appendChild(cLi); } oText.value = ''; cLi.style.height = 'auto'; var heightTmp = cLi.offsetHeight; cLi.style.height = 0; perfectStartMove(cLi,{height:heightTmp},function(){ perfectStartMove(cLi,{opacity:100}) }); }; }; </script> </head> <body> <textarea id='text1' rows='10' cols='40'></textarea><br / > <input type='button' value="发送"/> <ul> </ul> </body> </html>