javascript 微博发布框

最新推荐文章于 2021-12-20 21:53:06 发布

青天诀

最新推荐文章于 2021-12-20 21:53:06 发布

阅读量832

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： Web前端 javascript

本文链接：https://blog.youkuaiyun.com/u012193330/article/details/41653147

Web前端专栏收录该内容

123 篇文章

订阅专栏

本文介绍了一种使用JavaScript来动态创建和加载列表项的方法，包括调整新增元素的高度和透明度，实现平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发布后的内容高度缓慢变大，透明度从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>