點擊展開的文章評論效果

2010-08-12 文本操作 ℃

<!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>
<title>實用的文章評論效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{font-size:14px;}
p{margin:0px;padding:10px;}
#w{width:400px;}
.p{border:1px solid #999999;}
#p{width:380px;border:1px solid #999999;background-color:#FFFFFF;overflow:hidden;display:none;padding:10px;}
.c{cursor:pointer;font-size:12px;}
</style>
</head>
<body>
<div   class="a9u9mdh"   id="w">
	<p class="p">這里是文章正文部分：<br>資料庫：well-network.com，網(wǎng)頁特效代碼庫，歡迎光臨！</p>
	<p align="right"><span id="c" class="c">我要評論</span></p>
</div>
<div   class="awi21xo"   id="p">
	<input type="text" id="i" maxlength="10" name="i"><br>
	<span id="f4nunbp"    class="c">還能輸入<span id="n"></span>字</span>
</div>
<script language="javascript">
var _=function(id){return document.getElementById(id);}
var i=0,MAX=_("i").maxLength;
var s=function(id,h){
	if(parseInt(_(id).clientHeight)<h){
		_(id).style.height=parseInt(_(id).clientHeight)+i+++"px";
		setTimeout("s('"+id+"',"+h+")",10);
	}
}
_("n").innerHTML=MAX;
_("c").onclick=function(){
	_("p").style.display="block";
	s("p",200);
}
_("i").onkeyup=function(){
	_("n").innerHTML=MAX-this.value.length;
}
</script>
</body>
</html>

相關(guān)特效代碼

熱門特效代碼: 輸入框的文字閃爍變色引人注意; 純CSS內(nèi)頁內(nèi)容切換選項卡; 鼠標經(jīng)過鏈接顯示注釋旋轉(zhuǎn)風火輪; 指向自動選擇的輸入框; 放大鏡鏈接效果; 帶注釋的鏈接特效; 文字閃爍效果; 帶注釋的鏈接特效代碼; 點擊文字顯示隱藏鏈接; WEB2.0圓形邊框css做法

推薦特效代碼: 字符連續(xù)消隱; 文字變色逐個出現(xiàn); 段落文字百葉窗效果輸出; 點擊文字顯示隱藏鏈接; 文字由小變大由大變小（動態(tài)變化; 文字來回上下移動或跳動