<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #ul1 { margin: 0; position: absolute; right: 10px; top: 8px; width: 700px; height: 500px; border: 1px solid #000; padding: 10px; overflow: hidden;} li { line-height: 28px; border-bottom: 1px dotted #000; list-style: none; word-break: break-all; overflow: hidden;} </style> <script src="move.js"></script> <script> /* 先写出没有运动的效果，然后把赋值变成运动形式 */ window.onload = function() { var oContent = document.getElementById(‘content‘); var oBtn = document.getElementById(‘btn‘); var oUl = document.getElementById(‘ul1‘); oBtn.onclick = function() { var oLi = document.createElement(‘li‘); oLi.innerHTML = oContent.value; if ( oUl.children[0] ) { oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } //var iHeight = oLi.offsetHeight; var iHeight = parseInt( css(oLi, ‘height‘) ); oLi.style.height = ‘0px‘; oLi.style.opacity = ‘0‘; oLi.style.filter = ‘alpha(opacity=0)‘; startMove(oLi, { height : iHeight, opacity : 100 }); } } </script> </head> <body> <textarea id="content" rows="10" cols="50"></textarea> <input type="button" value="留言" id="btn" /> <ul id="ul1"></ul> </body> </html>
原文：http://www.cnblogs.com/mayufo/p/4349108.html