发布后的内容高度缓慢变大,透明度从0到100
js代码:
<script> window.onload=function(){ <span style="white-space:pre"> </span>var oTxt=document.getElementById('txts'); <span style="white-space:pre"> </span>var oBtn=document.getElementById('btn'); <span style="white-space:pre"> </span>var oUl=document.getElementById('ul1'); <span style="white-space:pre"> </span>var oLi=oUl.getElementsByTagName('li'); oBtn.onclick=function(){ <span style="white-space:pre"> </span>var node=document.createElement('li'); node.innerHTML=oTxt.value; oTxt.value=''; if(oLi.length>0) { oUl.insertBefore(node,oLi[0]); } else{ oUl.appendChild(node); } var iHeight=node.offsetHeight; node.style.height='0'; startMove(node,{height:iHeight-8},function(){ startMove(node,{opacity:100}); }); };
}; </script>
html代码如下:
<style> #ul1{ width:400px; height:400px; margin:10px auto; padding:0px; border:1px solid #222222; overflow:hidden; } #ul1 li{ width:360px; margin:0px auto; padding:4px; border-bottom:1px dashed #222222; list-style:none; overflow:hidden; filter:alpha(opacity=0); opacity: 0; text-overflow: ellipsis; } </style> <body> <span style="white-space:pre"> </span><textarea id="txts" cols="40" rows="4" style="resize: none"></textarea> <input id="btn" type="button" value="发布" /> <ul id="ul1"> </ul> </body>
时间: 2024-12-26 12:52:23