自动加载消息数据，这个是个简化版本，基本的功能都已经实现了
<!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> <style type="text/css"> * {padding: 0;margin: 0;} li {list-style: none;border-bottom: dashed #CCC 1px;padding: 5px;overflow: hidden;filter: alpha(opacity: 0);opacity:0;} #ul1 { 300px; height: 300px; border: 1px solid black; overflow: hidden;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="move.js"> </script> <script type="text/javascript"> window.onload = function(){ var oTxt = document.getElementById('txt1'); var oUl = document.getElementById('ul1'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ var oLi = document.createElement('li'); oLi.appendChild(document.createTextNode(oTxt.value)); oTxt.value = ''; oUl.insertBefore(oLi, oUl.firstChild); var height = oLi.offsetHeight; oLi.style.height = '0px'; startMove(oLi, 'height', height, function(){ startMove(oLi, 'opacity', 100); }); } }; </script> </head> <body> <textarea id="txt1" rows="5" cols="40"> </textarea> <br/> <input id="btn1" type="button" value="发送" /> <br/> <ul id="ul1"> </ul> </body> </html>