javascript 微博发布框

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

javascript 微博发布框的相关文章

js微博发布框的实现

引用前请标明出处:http://www.cnblogs.com/zkhzz/ 谢谢 观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时触发 2.onmouseover()// 鼠标滑到 发布  触发 3.onmouseout() //鼠标离开 发布  时触发 4.onfocus() //点击到 输入框 时触发 5.onblur() //点击到 输入

js微博发布框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

微博发布框---2017-04-14

实现效果: 1.文本框输入内容,低端字数对应减少 2.当文本框内容超出时,会显示字数超出多少 效果图如下: 实现代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #aa{ height: 150px; width: 300px; border: 1px solid grey; } #ff{ co

微博发布框的jquery

<style type="text/css"> textarea{ width: 300px; height: 300px; border: solid 1px #abcdef; } strong{ color: red; } </style> </head> <body> <textarea></textarea> <p>你还可以输入<strong>140</strong>个字

原生JavaScript 全特效微博发布面板效果实现

javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s

综合案例:微博发布新鲜事

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 width: 600px; 13 border: 1px solid bl

[js高手之路]设计模式系列课程-委托模式实战微博发布功能

在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 1 <ul> 2 <li>跟着ghostwu学习javascript设计模式的应用1</li> 3 <li>跟着ghostwu学习javascript设计模式的应用2</li> 4 <li>跟着ghostwu学习javascript设计模式的应用3</li&g

第32天:微博发布动态

微博发布动态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style> ul{ list-style:none; } *{ margin: 0; padding: 0; } .box{ margin:100px auto; width: 600px; heigh

微博发布代码

<style type="text/css"> *{ padding: 0; margin: 0;} .box{ width: 600px; height: auto; border: 1px solid #333; margin: 100px auto; padding:30px; } textarea{ width: 400px; height: 150px; resize:none; } .box ul{ list-style-type: none; line-hei