<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>
