模仿一些网站发布消息时候，淡入，缓慢滑动的小效果，废话不多说，看下最终测试效果！有图有真相！
接下来一步步分析实现的过程，一下是为了演示过程中一些注意点，用的测试代码，不是最终效果代码，最终效果代码，我贴在文章最后！！
html代码
<textarea id="content" cols="60" rows="10"></textarea><br>
<input id="btn1" type="button" value="发布">
<ul id="ulList">
<li>1233</li>
</ul>
样式代码
<style>
*{padding: 0;margin: 0;}
#ulList{
list-style: none;
width: 300px;height: 300px;
border: 1px solid #000;
margin: 10px auto;
}
#ulList li{
border-bottom: 1px dashed #c00;
padding: 2px;
}
</style>
<script>
window.onload = function () {
var oTxt = document.getElementById('content');
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ulList');
oBtn.onclick = function () {
var oLi = document.createElement('li');// 创建一个li元素
oLi.innerHTML = oTxt.value;
oTxt.value = '';
oUl.appendChild(oLi);
}
}
</script>
这里每次新创建的li都是放在尾部，如果想让它创建好放在顶部，需要判断一下，如果当前ul里没有li，那么直接appendChild，如果有已经有li元素，就用insertBefore
oBtn.onclick = function () {
var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');// 获取的ul下的所有li
oLi.innerHTML = oTxt.value;
oTxt.value = '';
if(aLi.length){ // 判断ul里有没有li元素
oUl.insertBefore(oLi);
}else{
oUl.appendChild(oLi);
}
}
到这里插入每一条内容，都会从头部插入了，但是插入的动作太生硬了，这里就用我们的运动框架，来使插入变得平滑；
首先保证先引入了运动框架：<script src="move.js"></script> 运动框架在《JS完美运动框架》中有代码
<script>
window.onload = function () {
var oTxt = document.getElementById('content');
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ulList');
oBtn.onclick = function () {
var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');// 获取的ul下的所有li
oLi.innerHTML = oTxt.value;
oTxt.value = '';
if(aLi.length){ // 判断ul里有没有li元素
oUl.insertBefore(oLi,aLi[0]);// 在下标为0的li前插入oLi
}else{
oUl.appendChild(oLi);
var iHeight = oLi.offsetHeight;
oLi.style.height = 0;// 然后把li的高度置0
startMove(oLi,{height:iHeight}, function () {
startMove(oLi,{opacity:100});
})
}
}
</script>
var iHeight = oLi.offsetHeight;// 1.上来先把li的高度存一下
oLi.style.height = 0;// 2. 然后把li的高度置0
startMove(oLi,{height:iHeight})// 3. 通过运动框架重新把li的高度设回去
看一下运行效果发现，做运动的时候文字会超出li的边框(图中文字开始时超出了红框的)，需要在li的样式设置中：使overflow：hidden，问题就解决了
#ulList li{ border-bottom: 1px dashed #c00; padding: 2px; overflow: hidden; }
到这里问题就解决了，但是在IE7 下会有先卡一下在出来的的现象，所以这里需要将原来的ul嵌套li的布局，改成div套div
<textarea id="content" cols="30" rows="10"></textarea><br>
<input id="btn1" type="button" value="发布"><br>
<div id="ulList">
<div>1233</div>
</div><script>
window.onload = function () {
var oTxt = document.getElementById('content');
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ulList');
oBtn.onclick = function () {
var oLi = document.createElement('div');//这里将li改成div
var aLi = oUl.getElementsByTagName('div');//这里将li改成div
oLi.innerHTML = oTxt.value;
oTxt.value = '';
if(aLi.length){
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
var iHeight = oLi.offsetHeight;
oLi.style.height = 0;
startMove(oLi,{height:iHeight}, function () {
startMove(oLi,{opacity:100});// 透明度改变
})
}
}
</script>
<div class="container">
<textarea id="content" cols="60" rows="10"></textarea><br>
<input id="btn1" type="button" value="发布"><br>
<div id="msgList">
<div></div>
</div>
</div><style>
*{padding: 0;margin: 0;}
body{background: url("body_repeat.png");}
.container{
width: 500px;
margin: 10px auto;
}
#content{
padding: 8px;
background: rgba(255,255,255,.6);
border: none;
box-shadow: 2px 2px 3px rgba(0,0,0,.6);
border-radius: 5px;
}
#btn1{
border: none;
width: 60px;height: 40px;
background: #ffc09f;
font-family:"微软雅黑";font-size:16px;color: #fff;
border-radius: 5px;
}
#msgList{
list-style: none;
width: 420px;_height: 400px;min-height: 400px;
background: rgba(255,255,255,.8);
border-radius: 5px;
border: 1px solid #eee;
margin: 10px ;
}
#msgList div{
border-bottom: 1px dashed #aaa;
padding: 2px;
opacity: 0;
filter:alpha(opacity:0);
overflow: hidden;
}
</style><script src="move.js"></script>
<script>
window.onload = function () {
var oTxt = document.getElementById('content');
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('msgList');
oBtn.onclick = function () {
var newDiv = document.createElement('div');//每发布一条消息需要创建一个新div
var aDiv = oDiv.getElementsByTagName('div');// 获取msgList的下的所有div元素
newDiv.innerHTML = oTxt.value;//新div的内容就等于textarea里发布内容
oTxt.value = ''; // 然后把textarea清空
if(aDiv.length){ // 判断msgList里有没有div元素
oDiv.insertBefore(newDiv,aDiv[0]);// 在下标为0的div前插入一个div
}else{
oDiv.appendChild(newDiv);
}
// 接下来是添加运动部分，因为插入的每个div的高度不固定
var iHeight = newDiv.offsetHeight;// 先把div的高度存一下
newDiv.style.height = 0;// 然后把div的高度置0
startMove(newDiv,{height:iHeight}, function () {
startMove(newDiv,{opacity:100});
})//通过运动框架重新把div的高度设回去
}
}
</script>
原文地址：http://blog.csdn.net/u014205965/article/details/45915135
