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

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

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

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

以下為所有程式碼：

複製程式碼 程式碼如下:

<script> <br>/*控制文章字数输入函数*/ <br>$(function(){ <br>$("td span").addClass('textCount');//页面加载时为所有span标签添加新浪字体样式 <br>}) <br>/* <br>words_deal函数是一个可以通用的关于仿新浪字符输入的函数，用在网站的文章编辑上可以提高用户的交互性 <br>dom：当前要操作的对象 <br>num：限制字符数量 <br>id:通过传入id值动态添加需要操作的span <br>*/ <br>function words_deal(dom,num,id) <br>{ <br>var curLength=$(dom).val().length; //获取文本框中输入的文字总数量 <br>if(curLength>num)//判断是否大于限制字符数量 <br>{ //如果大于限制级字符数量，获得从0到该限制数量的所有字符串 <br>var totalNum=$(dom).val().substr(0,num); <br>$(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示 <br>alert("超过字数限制，多出的字将被截断！" ); <br>} <br>else <br>{ <br>if(curLength>num-10) <br>{//如果输入字符为倒数10个字符时改变样式将字体变红 <br>$('.textCount_'+id).addClass("textAfter"); <br>} <br>else <br>{//否则移除样式 <br>$('.textCount_'+id).removeClass("textAfter"); <br>} <br>$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示 <br>} <br>} <br>//文章列表菜单栏效果控制函数 <br>function fun_search(dom,id){ <br>//控制搜索层显示或隐藏 <br>if(id!=1){ <br>$(".article_search").toggle("fast",function(){ <br>}); <br>} <br>//控制切换样式 <br>var className = $(dom).attr("class"); <br>if(className != 'on'){ <br>$('.search_table a').removeClass('on'); <br>$(dom).addClass('on'); <br>} <br>} <br></script>

添加文章
高级设置
搜索

添加时间：
-


--- 全部栏目 ---

--- ${list.name} ---

 

--- 查询条件 ---
---    ID    ---
---   标题   ---
---   简介   ---
---  发布人  ---
 

* 欄位

--- 全部欄目 ---

* 标题

剩余40个字

缩略图:

自定义属性

首页头条推荐
首页焦点图推荐
视频首页每日热点
视频首页头条推荐
视频首页焦点图
首页图片推荐


栏目首页推荐
视频栏目精彩推荐
网站顶部推荐

TAG标签

  (','号分开，单个标签小于12字节)

附加选项	提取第一个图片为缩略图      图片是否加水印
分页选项	手动 (分页符为： #p#分页标题#e# )    自动 大小:   K
评论选项	允许评论      禁止评论
* 标题	剩余20个字
文章排序	默认排序 置顶一周 置顶一月 置顶一年

<script> <br>//切换界面 <br>function toOpen(dom,id){ <br>var className = $(dom).attr("class"); <br>if(className != 'on'){ <br>$('table[id^=table_]').hide(); <br>$('.mainnav_title ul a').removeClass('on'); <br>$('#table_' id).show(); <br>$(dom).addClass('on'); <br>} <br>} <br>//文章列表菜单栏效果控制函数 <br>function fun_search(dom,id){ <br>//控制搜索层显示或隐藏 <br>if(id!=1){ <br>$(".article_search").toggle("fast",function(){ <br>}); <br>} <br>//控制切换样式 <br>var className = $(dom).attr("class"); <br>if(className != 'on'){ <br>$('.search_table a').removeClass('on'); <br>$(dom).addClass('on'); <br>} <br>} <br></script>


以下是运行的效果图：
 
ps：代码规范很重要，养成加注释的好习惯。