jquery實現(xiàn)隱藏與顯示動畫效果/輸入框字符動態(tài)遞減/導航按鈕切換
更新時間：2013年07月01日 17:53:31 作者：
jquery實現(xiàn)隱藏顯示層動畫效果、仿新浪字符動態(tài)輸入、tab效果等等，以下為所有代碼，感興趣的朋友可以練練手哈，希望對大家學習有所幫助
已經(jīng)有兩年多沒登陸csdn賬號了，中間做了些旁的事，可是現(xiàn)在卻還是回歸程序，但改做前端了，雖然很多東西都已忘得差不多了，但還是應該擺正心態(tài)，慢慢來，在前端漫游，做一只快樂雙魚。
路是一步一步走出來的，知識是一點一滴積累的，記錄是筆財富，來吧，一起學著總結(jié)做筆記。
這幾天在寫后臺文章的一些頁面，為了能得到更好的交互性，需要做一些效果，js無疑使不二之選，但由于瀏覽器的兼容性一直差強人意，所以選用jquery框架，通過css樣式、dom節(jié)點以及自身所帶函數(shù)就可以實現(xiàn)比較好的用戶體驗，此案例有三個功能點。分別為：
1.利用jquery自身的toggle（）函數(shù)實現(xiàn)層的隱藏與顯示動畫;
2.仿新浪、騰訊微博輸入框字符動態(tài)遞減效果（可作為單獨的js，引入即可通用）;
3.實現(xiàn)幾個導航按鈕切換不同的內(nèi)容，類似tab;
以下為所有代碼：
<!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-Type" content="text/html; charset=utf-8" />
<title>用jquery實現(xiàn)兩個table的顯示與隱藏</title>
<script type="text/javascript" src="jquery-1.2.6.min.js" language="javascript"> </script>
<style>
/*整體table樣式*/
.mainbox {margin:5px 10px;overflow:hidden;zoom:1;_margin:5px;}
.mainnav_title {line-height:40px;height:40px;border-bottom:1px solid #eee;color:#ddd;}
.mainnav_title a {color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;}
.mainnav_title a:hover ,.mainnav_title a.on{background:#498CD0;color:#FFF;}
.table_form td{padding-left:12px}
.table_form th span{color:#FF0000}
.table_form th{font-weight:normal; text-align:right;padding-right:10px; color:#777}
.table_form td label{ vertical-align:middle}
.table_form td , .table_form th{padding:8px 0 5px 8px;line-height:22px;}
.table_form tbody td,.table_form tbody th{border-bottom:1px solid #eee; }
.colorpanel tbody td,.colorpanel tbody th{ padding:0;border-bottom: none;}
/*控制文章字數(shù)輸入樣式*/
.textAfter{font-weight: 700;font-size: 22px;font-style: italic;color:#FF0000;font-family: Constantia, Georgia;}
.textCount{font-weight: 700;font-size: 22px;font-style: italic;font-family: Constantia, Georgia;}
/*文章列表頁面樣式*/
.article_search{border:1px solid #FFCC33; background-color:#FFFFCC;height:46px;margin:10px 0px 10px 0px;line-height:46px;padding:0px 15px 0px 15px;}
.advsetup{background-color:red; height:57px;line-height:57px;}
.search_table a:hover ,.search_table a.on{background:#498CD0;color:#FFF;}
.search_table a{margin:5px;padding:5px;height:15px;line-height:15px;}
.search a{color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;}
</style>
<script>
/*控制文章字數(shù)輸入函數(shù)*/
$(function(){
$("td span").addClass('textCount');//頁面加載時為所有span標簽添加新浪字體樣式
})
/*
words_deal函數(shù)是一個可以通用的關于仿新浪字符輸入的函數(shù)，用在網(wǎng)站的文章編輯上可以提高用戶的交互性
dom：當前要操作的對象
num：限制字符數(shù)量
id:通過傳入id值動態(tài)添加需要操作的span
*/
function words_deal(dom,num,id)
{
var curLength=$(dom).val().length; //獲取文本框中輸入的文字總數(shù)量
if(curLength>num)//判斷是否大于限制字符數(shù)量
{ //如果大于限制級字符數(shù)量，獲得從0到該限制數(shù)量的所有字符串
var totalNum=$(dom).val().substr(0,num);
$(dom).val(totalNum); //將這些字符重新載入文本框，并彈框提示
alert("超過字數(shù)限制，多出的字將被截斷！" );
}
else
{
if(curLength>num-10)
{//如果輸入字符為倒數(shù)10個字符時改變樣式將字體變紅
$('.textCount_'+id).addClass("textAfter");
}
else
{//否則移除樣式
$('.textCount_'+id).removeClass("textAfter");
}
$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制級字符數(shù)量,進行累加計數(shù)顯示
}
}
//文章列表菜單欄效果控制函數(shù)
function fun_search(dom,id){
//控制搜索層顯示或隱藏
if(id!=1){
$(".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,'1');" class="on">添加文章</a>
<a href="javascript:;" onclick="toOpen(this,'2');">高級設置</a>
<a href="javascript:;" onclick="fun_search(this,2);">搜索</a>
</ul>
</div>
<!--導航欄end-->
<!--搜索層start-->
<div class="article_search" style="display:none;">
<form id="searchForm" action="admin/user/0" method="post">
添加時間：
<input type="text" class="input-text" name="dateMin" id="dateMin" readonly="readonly"/> -
<input type="text" class="input-text" name="dateMax" id="dateMax" readonly="readonly"/>
<select name="channel_id2" id="channel_id2">
<option value="" >--- 全部欄目 ---</option>
<c:forEach items="${list}" var="list">
<option value="${list.id}">--- ${list.name} ---</option>
</c:forEach>
</select>
<select name="choose">
<option value="" >--- 查詢條件 ---</option>
<option value="" >--- ID ---</option>
<option value="" >--- 標題 ---</option>
<option value="" >--- 簡介 ---</option>
<option value="" >--- 發(fā)布人 ---</option>
</select>
<input type="text" class="input-text" name="txtSearch" size="30"></input>
<input type="submit" class="button" value="搜索"></input>
</form>
</div>
<!--搜索層end-->
<!--第一個div層start-->
<table id="table_1" cellpadding=0 cellspacing=0 width="100%" class="table_form" >
<tr>
<th width="140"><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="140"><span>*</span> 標題</th>
<td>
<input name="title" id="title" class="input-text"" type="text" size="90" onkeyup="words_deal(this,40,1);"></input>剩余<span class="textCount_1">40</span>個字<br />
</td>
</tr>
<tr>
<th width="140">縮略圖:</th>
<td>
<table>
<td>
<input name="txtSmallPic" type="text" id="text" class="input-text" size="45"/>
<input name="btnUpdown" type="submit" value="本地上傳" class="button"/>
<input name="btnChoose" type="submit" value="站內(nèi)選擇" class="button"/>
<input name="btnCut" type="submit" value="裁切" class="button"/>
</td>
<td><img src="thumbnail.ico" style="width:128px; height:128px;" /></td>
</table>
</td>
</tr>
<tr>
<th width="140">自定義屬性 </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" /> 網(wǎng)站頂部推薦
</td>
</tr>
<tr>
<th width="140">TAG標簽</th>
<td>
<input id="txtTag" class="input-text" type="text" size=""/> (','號分開，單個標簽小于12字節(jié))
</td>
</tr>
</table>
<!--第一個div層end-->
<!--第二個div層start-->
<table id="table_2" style="display:none;" cellpadding=0 cellspacing=0 width="100%" class="table_form">
<tr>
<th width="140">附加選項</th>
<td>
<input id="chkDiyAtrr" type="checkbox" /> 提取第一個圖片為縮略圖
<input id="chkWatermark" type="checkbox" /> 圖片是否加水印
</td>
</tr>
<tr><th width="140">分頁選項</th>
<td>
<input id="rdoManual" type="radio" class="input-text" /> 手動 (分頁符為： #p#分頁標題#e# )
<input id="rdoAutomatic" type="radio" class="input-text" /> 自動 大小:
<input id="txtPage" type="text" style=" width:20px;" />K
</td>
</tr>
<tr>
<th width="140"> 評論選項</th>
<td>
<input id="rdoAllow" type="radio" class="input-text"/> 允許評論
<input id="rdoBan" type="radio" class="input-text" /> 禁止評論
</td>
</tr>
<tr>
<th width="140"><span>*</span> 標題</th>
<td>
<input name="title" class="input-text"" type="text" size="90" id="TextArea" onkeyup="words_deal(this,20,2);"/>
剩余<span class="textCount_2">20</span>個字<br />
</td>
</tr>
<tr>
<th width="140"> 文章排序 </th>
<td colspan="2">
<select id="u108" class="u108">
<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(dom,id){
var className = $(dom).attr("class");
if(className != 'on'){
$('table[id^=table_]').hide();
$('.mainnav_title ul a').removeClass('on');
$('#table_'+id).show();
$(dom).addClass('on');
}
}
//文章列表菜單欄效果控制函數(shù)
function fun_search(dom,id){
//控制搜索層顯示或隱藏
if(id!=1){
$(".article_search").toggle("fast",function(){
});
}
//控制切換樣式
var className = $(dom).attr("class");
if(className != 'on'){
$('.search_table a').removeClass('on');
$(dom).addClass('on');
}
}
</script>
</html>
以下是運行的效果圖：
ps：代碼規(guī)范很重要，養(yǎng)成加注釋的好習慣。
路是一步一步走出來的，知識是一點一滴積累的，記錄是筆財富，來吧，一起學著總結(jié)做筆記。
這幾天在寫后臺文章的一些頁面，為了能得到更好的交互性，需要做一些效果，js無疑使不二之選，但由于瀏覽器的兼容性一直差強人意，所以選用jquery框架，通過css樣式、dom節(jié)點以及自身所帶函數(shù)就可以實現(xiàn)比較好的用戶體驗，此案例有三個功能點。分別為：
1.利用jquery自身的toggle（）函數(shù)實現(xiàn)層的隱藏與顯示動畫;
2.仿新浪、騰訊微博輸入框字符動態(tài)遞減效果（可作為單獨的js，引入即可通用）;
3.實現(xiàn)幾個導航按鈕切換不同的內(nèi)容，類似tab;
以下為所有代碼：
復制代碼 代碼如下:
<!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-Type" content="text/html; charset=utf-8" />
<title>用jquery實現(xiàn)兩個table的顯示與隱藏</title>
<script type="text/javascript" src="jquery-1.2.6.min.js" language="javascript"> </script>
<style>
/*整體table樣式*/
.mainbox {margin:5px 10px;overflow:hidden;zoom:1;_margin:5px;}
.mainnav_title {line-height:40px;height:40px;border-bottom:1px solid #eee;color:#ddd;}
.mainnav_title a {color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;}
.mainnav_title a:hover ,.mainnav_title a.on{background:#498CD0;color:#FFF;}
.table_form td{padding-left:12px}
.table_form th span{color:#FF0000}
.table_form th{font-weight:normal; text-align:right;padding-right:10px; color:#777}
.table_form td label{ vertical-align:middle}
.table_form td , .table_form th{padding:8px 0 5px 8px;line-height:22px;}
.table_form tbody td,.table_form tbody th{border-bottom:1px solid #eee; }
.colorpanel tbody td,.colorpanel tbody th{ padding:0;border-bottom: none;}
/*控制文章字數(shù)輸入樣式*/
.textAfter{font-weight: 700;font-size: 22px;font-style: italic;color:#FF0000;font-family: Constantia, Georgia;}
.textCount{font-weight: 700;font-size: 22px;font-style: italic;font-family: Constantia, Georgia;}
/*文章列表頁面樣式*/
.article_search{border:1px solid #FFCC33; background-color:#FFFFCC;height:46px;margin:10px 0px 10px 0px;line-height:46px;padding:0px 15px 0px 15px;}
.advsetup{background-color:red; height:57px;line-height:57px;}
.search_table a:hover ,.search_table a.on{background:#498CD0;color:#FFF;}
.search_table a{margin:5px;padding:5px;height:15px;line-height:15px;}
.search a{color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;}
</style>
<script>
/*控制文章字數(shù)輸入函數(shù)*/
$(function(){
$("td span").addClass('textCount');//頁面加載時為所有span標簽添加新浪字體樣式
})
/*
words_deal函數(shù)是一個可以通用的關于仿新浪字符輸入的函數(shù)，用在網(wǎng)站的文章編輯上可以提高用戶的交互性
dom：當前要操作的對象
num：限制字符數(shù)量
id:通過傳入id值動態(tài)添加需要操作的span
*/
function words_deal(dom,num,id)
{
var curLength=$(dom).val().length; //獲取文本框中輸入的文字總數(shù)量
if(curLength>num)//判斷是否大于限制字符數(shù)量
{ //如果大于限制級字符數(shù)量，獲得從0到該限制數(shù)量的所有字符串
var totalNum=$(dom).val().substr(0,num);
$(dom).val(totalNum); //將這些字符重新載入文本框，并彈框提示
alert("超過字數(shù)限制，多出的字將被截斷！" );
}
else
{
if(curLength>num-10)
{//如果輸入字符為倒數(shù)10個字符時改變樣式將字體變紅
$('.textCount_'+id).addClass("textAfter");
}
else
{//否則移除樣式
$('.textCount_'+id).removeClass("textAfter");
}
$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制級字符數(shù)量,進行累加計數(shù)顯示
}
}
//文章列表菜單欄效果控制函數(shù)
function fun_search(dom,id){
//控制搜索層顯示或隱藏
if(id!=1){
$(".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,'1');" class="on">添加文章</a>
<a href="javascript:;" onclick="toOpen(this,'2');">高級設置</a>
<a href="javascript:;" onclick="fun_search(this,2);">搜索</a>
</ul>
</div>
<!--導航欄end-->
<!--搜索層start-->
<div class="article_search" style="display:none;">
<form id="searchForm" action="admin/user/0" method="post">
添加時間：
<input type="text" class="input-text" name="dateMin" id="dateMin" readonly="readonly"/> -
<input type="text" class="input-text" name="dateMax" id="dateMax" readonly="readonly"/>
<select name="channel_id2" id="channel_id2">
<option value="" >--- 全部欄目 ---</option>
<c:forEach items="${list}" var="list">
<option value="${list.id}">--- ${list.name} ---</option>
</c:forEach>
</select>
<select name="choose">
<option value="" >--- 查詢條件 ---</option>
<option value="" >--- ID ---</option>
<option value="" >--- 標題 ---</option>
<option value="" >--- 簡介 ---</option>
<option value="" >--- 發(fā)布人 ---</option>
</select>
<input type="text" class="input-text" name="txtSearch" size="30"></input>
<input type="submit" class="button" value="搜索"></input>
</form>
</div>
<!--搜索層end-->
<!--第一個div層start-->
<table id="table_1" cellpadding=0 cellspacing=0 width="100%" class="table_form" >
<tr>
<th width="140"><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="140"><span>*</span> 標題</th>
<td>
<input name="title" id="title" class="input-text"" type="text" size="90" onkeyup="words_deal(this,40,1);"></input>剩余<span class="textCount_1">40</span>個字<br />
</td>
</tr>
<tr>
<th width="140">縮略圖:</th>
<td>
<table>
<td>
<input name="txtSmallPic" type="text" id="text" class="input-text" size="45"/>
<input name="btnUpdown" type="submit" value="本地上傳" class="button"/>
<input name="btnChoose" type="submit" value="站內(nèi)選擇" class="button"/>
<input name="btnCut" type="submit" value="裁切" class="button"/>
</td>
<td><img src="thumbnail.ico" style="width:128px; height:128px;" /></td>
</table>
</td>
</tr>
<tr>
<th width="140">自定義屬性 </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" /> 網(wǎng)站頂部推薦
</td>
</tr>
<tr>
<th width="140">TAG標簽</th>
<td>
<input id="txtTag" class="input-text" type="text" size=""/> (','號分開，單個標簽小于12字節(jié))
</td>
</tr>
</table>
<!--第一個div層end-->
<!--第二個div層start-->
<table id="table_2" style="display:none;" cellpadding=0 cellspacing=0 width="100%" class="table_form">
<tr>
<th width="140">附加選項</th>
<td>
<input id="chkDiyAtrr" type="checkbox" /> 提取第一個圖片為縮略圖
<input id="chkWatermark" type="checkbox" /> 圖片是否加水印
</td>
</tr>
<tr><th width="140">分頁選項</th>
<td>
<input id="rdoManual" type="radio" class="input-text" /> 手動 (分頁符為： #p#分頁標題#e# )
<input id="rdoAutomatic" type="radio" class="input-text" /> 自動 大小:
<input id="txtPage" type="text" style=" width:20px;" />K
</td>
</tr>
<tr>
<th width="140"> 評論選項</th>
<td>
<input id="rdoAllow" type="radio" class="input-text"/> 允許評論
<input id="rdoBan" type="radio" class="input-text" /> 禁止評論
</td>
</tr>
<tr>
<th width="140"><span>*</span> 標題</th>
<td>
<input name="title" class="input-text"" type="text" size="90" id="TextArea" onkeyup="words_deal(this,20,2);"/>
剩余<span class="textCount_2">20</span>個字<br />
</td>
</tr>
<tr>
<th width="140"> 文章排序 </th>
<td colspan="2">
<select id="u108" class="u108">
<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(dom,id){
var className = $(dom).attr("class");
if(className != 'on'){
$('table[id^=table_]').hide();
$('.mainnav_title ul a').removeClass('on');
$('#table_'+id).show();
$(dom).addClass('on');
}
}
//文章列表菜單欄效果控制函數(shù)
function fun_search(dom,id){
//控制搜索層顯示或隱藏
if(id!=1){
$(".article_search").toggle("fast",function(){
});
}
//控制切換樣式
var className = $(dom).attr("class");
if(className != 'on'){
$('.search_table a').removeClass('on');
$(dom).addClass('on');
}
}
</script>
</html>
以下是運行的效果圖：
ps：代碼規(guī)范很重要，養(yǎng)成加注釋的好習慣。
相關文章
jQuery.animate的每種動畫過渡效果都是通過easing函數(shù)實現(xiàn)的，下面是自己研究之后對其的基本認識2014-08-08
這篇文章主要為大家詳細介紹了jQuery多選框選擇數(shù)量限制方法，最多選擇 三項 的上限已滿, 其他選項將會變?yōu)椴豢蛇x2017-02-02
純JAVASCRIPT圖表動畫插件Highcharts Examples
官方提供免費的下載包以及詳細的文檔說明，非常的值得收藏。2011-04-04
存儲過程是在大型數(shù)據(jù)庫系統(tǒng)中，一組為了完成特定功能的sql語句集，經(jīng)過編譯存儲在數(shù)據(jù)庫中，用戶通過指定存儲過程的名字并給出參數(shù)（如果該存儲過程帶有參數(shù)）來執(zhí)行它，下面小編給大家介紹asp.net中oracle存儲過程，需要的朋友可以參考下2015-08-08
分頁幾乎是每個外部程序必不可少的東西，在webform時代很多人都用過AspNetPager這個用戶控件吧，用的人之多其實就在于它的優(yōu)點2011-07-07
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法，學習jquery的朋友可以參考下2012-02-02
這篇文章主要為大家詳細介紹了jquery實現(xiàn)下拉菜單的手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
jQuery.get、jQuery.getJSON、jQuery.post無法返回JSON問題的解決方法
在WEB項目中，經(jīng)常會使用到jQuery進行AJAX請求，但是自從使用了.net 3.5以后，以往寫的請求語句就有些小問題了，就是返回的始終是xml,而并不是JSON2011-07-07
這篇文章主要介紹了href下載文件的實現(xiàn)，主要是根據(jù)id取url并下載,需要的朋友可以參考下2014-05-05
這里給大家推薦9款炫酷的基于jquery的頁面特效，都是本站比較熱門的效果，這里整理出來分享給大家，也方便小伙伴們對比查看2014-12-12