jquery實現隱藏與顯示動畫效果/輸入框字符動態遞減/導航按鈕切換

jquery實現隱藏顯示層動畫效果仿新浪字符動態輸入tab效果等等以下為所有代碼感興趣的朋友可以練練手哈希望對大家學習有所幫助

　　已經有兩年多沒登陸csdn賬號了中間做了些旁的事可是現在卻還是回歸程序但改做前端了雖然很多東西都已忘得差不多了但還是應該擺正心態慢慢來在前端漫游做一只快樂雙魚
路是一步一步走出來的知識是一點一滴積累的記錄是筆財富來吧一起學著總結做筆記

這幾天在寫後台文章的一些頁面為了能得到更好的交互性需要做一些效果js無疑使不二之選但由於浏覽器的兼容性一直差強人意所以選用jquery框架通過css樣式dom節點以及自身所帶函數就可以實現比較好的用戶體驗此案例有三個功能點分別為

利用jquery自身的toggle（）函數實現層的隱藏與顯示動畫;
仿新浪騰訊微博輸入框字符動態遞減效果（可作為單獨的js引入即可通用）;
實現幾個導航按鈕切換不同的內容類似tab;

以下為所有代碼

復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>用jquery實現兩個table的顯示與隱藏</title>
<script type="text/javascript" src="jqueryminjs" language="javascript"> </script>
<style>
/*整體table樣式*/
mainbox {margin:px px;overflow:hidden;zoom:;_margin:px;}
mainnav_title {lineheight:px;height:px;borderbottom:px solid #eee;color:#ddd;}
mainnav_title a {color:#;margin: px;padding:px px;background:#EFEFEF;}
mainnav_title a:hover mainnav_title aon{background:#CD;color:#FFF;}
table_form td{paddingleft:px}
table_form th span{color:#FF}
table_form th{fontweight:normal; textalign:right;paddingright:px; color:#}
table_form td label{ verticalalign:middle}
table_form td table_form th{padding:px px px;lineheight:px;}
table_form tbody tdtable_form tbody th{borderbottom:px solid #eee; }
colorpanel tbody tdcolorpanel tbody th{ padding:;borderbottom: none;}
/*控制文章字數輸入樣式*/
textAfter{fontweight: ;fontsize: px;fontstyle: italic;color:#FF;fontfamily: Constantia Georgia;}
textCount{fontweight: ;fontsize: px;fontstyle: italic;fontfamily: Constantia Georgia;}
/*文章列表頁面樣式*/
article_search{border:px solid #FFCC; backgroundcolor:#FFFFCC;height:px;margin:px px px px;lineheight:px;padding:px px px px;}
advsetup{backgroundcolor:red; height:px;lineheight:px;}
search_table a:hover search_table aon{background:#CD;color:#FFF;}
search_table a{margin:px;padding:px;height:px;lineheight:px;}
search a{color:#;margin: px;padding:px px;background:#EFEFEF;}
</style>
<script>
/*控制文章字數輸入函數*/
$(function(){
$("td span")addClass(textCount);//頁面加載時為所有span標簽添加新浪字體樣式
})
/*
words_deal函數是一個可以通用的關於仿新浪字符輸入的函數用在網站的文章編輯上可以提高用戶的交互性
dom當前要操作的對象
num限制字符數量
id:通過傳入id值動態添加需要操作的span
*/
function words_deal(domnumid)
{
var curLength=$(dom)val()length; //獲取文本框中輸入的文字總數量
if(curLength>num)//判斷是否大於限制字符數量
{ //如果大於限制級字符數量獲得從到該限制數量的所有字符串
var totalNum=$(dom)val()substr(num);
$(dom)val(totalNum); //將這些字符重新載入文本框並彈框提示
alert("超過字數限制多出的字將被截斷！" );
}
else
{
if(curLength>num)
{//如果輸入字符為倒數個字符時改變樣式將字體變紅
$(textCount_+id)addClass("textAfter");
}
else
{//否則移除樣式
$(textCount_+id)removeClass("textAfter");
}
$("textCount_"+id)text(num$(dom)val()length); //如小於限制級字符數量進行累加計數顯示
}
}
//文章列表菜單欄效果控制函數
function fun_search(domid){
//控制搜索層顯示或隱藏
if(id!=){
$("article_search")toggle("fast"function(){
});
}
//控制切換樣式
var className = $(dom)attr("class");
if(className != on){
$(search_table a)removeClass(on);
$(dom)addClass(on);
}
}
</script>
</head>
<body>
<!包含層start>
<div class="mainbox">
<!導航欄strat>
<div id="nav" class="mainnav_title">
<ul>
<a href="javascript:;" onclick="toOpen(this);" class="on">添加文章</a>
<a href="javascript:;" onclick="toOpen(this);">高級設置</a>
<a href="javascript:;" onclick="fun_search(this);">搜索</a>
</ul>
</div>
<!導航欄end>
<!搜索層start>
<div class="article_search" style="display:none;">
<form id="searchForm" action="admin/user/" method="post">
添加時間
<input type="text" class="inputtext" name="dateMin" id="dateMin" readonly="readonly"/>
<input type="text" class="inputtext" name="dateMax" id="dateMax" readonly="readonly"/>
<select name="channel_id" id="channel_id">
<option value="" > 全部欄目 </option>
<c:forEach items="${list}" var="list">
<option value="${listid}"> ${listname} </option>
</c:forEach>
</select>
<select name="choose">
<option value="" > 查詢條件 </option>
<option value="" > ID </option>
<option value="" > 標題 </option>
<option value="" > 簡介 </option>
<option value="" > 發布人 </option>
</select>
<input type="text" class="inputtext" name="txtSearch" size=""></input>
<input type="submit" class="button" value="搜索"></input>
</form>
</div>
<!搜索層end>
<!第一個div層start>
<table id="table_" cellpadding= cellspacing= width="%" class="table_form" >
<tr>
<th width=""><span>*</span> 欄目</th>
<td>
<select name="channel" id="channel">
<option value="" > 全部欄目 </option>
<c:forEach items="${list}" var="list">
<option value=""></option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<th width=""><span>*</span> 標題</th>
<td>
<input name="title" id="title" class="inputtext"" type="text" size="" onkeyup="words_deal(this);"></input>剩余<span class="textCount_"></span>個字<br />
</td>
</tr>
<tr>
<th width="">縮略圖:</th>
<td>
<table>
<td>
<input name="txtSmallPic" type="text" id="text" class="inputtext" size=""/>
<input name="btnUpdown" type="submit" value="本地上傳" class="button"/>
<input name="btnChoose" type="submit" value="站內選擇" class="button"/>
<input name="btnCut" type="submit" value="裁切" class="button"/>
</td>
<td><img src="thumbnailico" style="width:px; height:px;" /></td>
</table>
</td>
</tr>
<tr>
<th width="">自定義屬性 </th>
<td>
<input id="chkDiyAtrr" type="checkbox" /> 首頁頭條推薦
<input id="chkDiyAtrr" type="checkbox" /> 首頁焦點圖推薦
<input id="chkDiyAtrr" type="checkbox" /> 視頻首頁每日熱點
<input id="chkDiyAtrr" type="checkbox" /> 視頻首頁頭條推薦
<input id="chkDiyAtrr" type="checkbox" /> 視頻首頁焦點圖
<input id="chkDiyAtrr" type="checkbox" /> 首頁圖片推薦<br></br>
<input id="chkDiyAtrr" type="checkbox" /> 欄目首頁推薦
<input id="chkDiyAtrr" type="checkbox" /> 視頻欄目精彩推薦
<input id="chkDiyAtrr" type="checkbox" /> 網站頂部推薦
</td>
</tr>
<tr>
<th width="">TAG標簽</th>
<td>
<input id="txtTag" class="inputtext" type="text" size=""/> (號分開單個標簽小於字節)
</td>
</tr>
</table>
<!第一個div層end>
<!第二個div層start>
<table id="table_" style="display:none;" cellpadding= cellspacing= width="%" class="table_form">
<tr>
<th width="">附加選項</th>
<td>
<input id="chkDiyAtrr" type="checkbox" /> 提取第一個圖片為縮略圖
<input id="chkWatermark" type="checkbox" /> 圖片是否加水印
</td>
</tr>
<tr><th width="">分頁選項</th>
<td>
<input id="rdoManual" type="radio" class="inputtext" /> 手動 (分頁符為 #p#分頁標題#e# )
<input id="rdoAutomatic" type="radio" class="inputtext" /> 自動大小:
<input id="txtPage" type="text" style=" width:px;" />K
</td>
</tr>
<tr>
<th width=""> 評論選項</th>
<td>
<input id="rdoAllow" type="radio" class="inputtext"/> 允許評論
<input id="rdoBan" type="radio" class="inputtext" /> 禁止評論
</td>
</tr>
<tr>
<th width=""><span>*</span> 標題</th>
<td>
<input name="title" class="inputtext"" type="text" size="" id="TextArea" onkeyup="words_deal(this);"/>
剩余<span class="textCount_"></span>個字<br />
</td>
</tr>
<tr>
<th width=""> 文章排序 </th>
<td colspan="">
<select id="u" class="u">
<option selected="" value="默認排序">默認排序</option>
<option value="置頂一周">置頂一周</option>
<option value="置頂一月">置頂一月</option>
<option value="置頂一年">置頂一年</option>
</select>
</td>
</tr>
</table>
<!第二個div層end>
</div>
<!包含層start>
</body>
<script>
//切換界面
function toOpen(domid){
var className = $(dom)attr("class");
if(className != on){
$(table[id^=table_])hide();
$(mainnav_title ul a)removeClass(on);
$(#table_+id)show();
$(dom)addClass(on);
}
}
//文章列表菜單欄效果控制函數
function fun_search(domid){
//控制搜索層顯示或隱藏
if(id!=){
$("article_search")toggle("fast"function(){
});
}
//控制切換樣式
var className = $(dom)attr("class");
if(className != on){
$(search_table a)removeClass(on);
$(dom)addClass(on);
}
}
</script>
</html>

　　
以下是運行的效果圖

ps代碼規范很重要養成加注釋的好習慣

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20099.html