效果：
思路：
利用多功能浮動運動框架實現微博效果，首先，將textarea中的屬性加入新建立的li裡面然後，再將li加入ul裡面，再利用浮動運動框架將資料動態的顯示出來。
代碼：
複製代碼代碼如下:
<head runat="server">
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#ul1
{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 10px auto;
overflow: hidden;
}
#ul1 li
{
list-style: none;
padding: 4px;
border-bottom: 1px #999 dashed;
overflow: hidden;
opacity: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick = function () {
var cLi = document.createElement('li');
cLi.innerHTML = txt.value; //將資料加入li裡面
txt.value = '';
if (oUl.children.length > 0) { //判斷是否已經有li，如果有那麼就插入，如果沒有那麼就新建
oUl.insertBefore(cLi, oUl.children[0]);
} else {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight; //獲得li的高度
cLi.style.height = '0';
move(cLi, { height: iHeight }, function () { //然後利用浮動運動將資料顯示出來
move(cLi, { opacity: 100 });
});
}
}
//------------------------------------------------ ------------------------------------
//取得非行間樣式
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//緩衝運動json的應用
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //obj是對象，Json是物件的屬性， fnName是函數
clearInterval(obj.timer); //關閉先前的計時器
obj.timer = setInterval(function () {
var timeStop = true; //記錄屬性是否都已經執行完成
for (var attr in json) { //遍歷json中的數據
var oGetStyle = 0;
if (attr == 'opacity') { //判斷透明度
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整，然後轉換完後賦值
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5; //求速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //進位取整
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') { //透明度
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //給透明度賦值
obj.style.opacity = (oGetStyle + speed) / 100;
}
else {
obj.style[attr] = oGetStyle + speed + 'px'; //移動div
}
}
if (timeStop) { //如果所有屬性都已經執行完成，那麼就關閉計時器
clearInterval(obj.timer);
if (fnName) { //關閉計時器後要執行的函數
fnName();
}
}
}, 30)
}
//------------------------------------------------ ------------------------------------
</script>
</head>
<body>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="發布" />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</body>