首页 > 编程语言 > 详细

javascript 微博发布框

时间:2014-12-01 22:32:03      阅读:353      评论:0      收藏:0      [点我收藏+]

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

bubuko.com,布布扣

javascript 微博发布框

原文:http://blog.csdn.net/u012193330/article/details/41653147

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!