知识大全 jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

Posted 2022-07-14 字符

篇首语：知识是一种快乐，而好奇则是知识的萌芽。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换相关的知识，希望对你有一定的参考价值。

jquery实现隐藏显示层动画效果仿新浪字符动态输入 tab效果等等以下为所有代码感兴趣的朋友可以练练手哈希望对大家学习有所帮助

　　已经有两年多没登陆csdn账号了中间做了些旁的事可是现在却还是回归程序但改做前端了虽然很多东西都已忘得差不多了但还是应该摆正心态慢慢来在前端漫游做一只快乐双鱼路是一步一步走出来的知识是一点一滴积累的记录是笔财富来吧一起学着总结做笔记这几天在写后台文章的一些页面为了能得到更好的交互性需要做一些效果 js无疑使不二之选但由于浏览器的兼容性一直差强人意所以选用jquery框架通过css样式 dom节点以及自身所带函数就可以实现比较好的用户体验此案例有三个功能点分别为利用jquery自身的toggle（）函数实现层的隐藏与显示动画; 仿新浪腾讯微博输入框字符动态递减效果（可作为单独的js 引入即可通用）; 实现几个导航按钮切换不同的内容类似tab; 以下为所有代码

复制代码代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=utf " /> <title>用jquery实现两个table的显示与隐藏</title> <script type=text/javascript src=jquery min js language="javascript"> </script> <style> /*整体table样式*/ mainbox margin: px px;overflow:hidden;zoom: ;_margin: px; mainnav_title line height: px;height: px;border bottom: px solid #eee;color:#ddd; mainnav_title a color:# ;margin: px;padding: px px;background:#EFEFEF; mainnav_title a:hover mainnav_title a onbackground:# CD ;color:#FFF; table_form tdpadding left: px table_form th spancolor:#FF table_form thfont weight:normal; text align:right;padding right: px; color:# table_form td label vertical align:middle table_form td table_form thpadding: px px px;line height: px; table_form tbody td table_form tbody thborder bottom: px solid #eee; colorpanel tbody td colorpanel tbody th padding: ;border bottom: none; /*控制文章字数输入样式*/ textAfterfont weight: ;font size: px;font style: italic;color:#FF ;font family: Constantia Geia; textCountfont weight: ;font size: px;font style: italic;font family: Constantia Geia; /*文章列表页面样式*/ article_searchborder: px solid #FFCC ; background color:#FFFFCC;height: px;margin: px px px px;line height: px;padding: px px px px; advsetupbackground color:red; height: px;line height: px; search_table a:hover search_table a onbackground:# CD ;color:#FFF; search_table amargin: px;padding: px;height: px;line height: px; search acolor:# ;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(dom num id) 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(dom id) //控制搜索层显示或隐藏 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 > <! 导航栏strat > <div id="nav" > <ul> <a href="javascript:;" onclick="toOpen(this );" >添加文章</a> <a href="javascript:;" onclick="toOpen(this );">高级设置</a> <a href="javascript:;" onclick="fun_search(this );">搜索</a> </ul> </div> <! 导航栏end > <! 搜索层start > <div > <form id="searchForm" action="admin/user/ " method="post"> 添加时间 <input type=text name=dateMin id="dateMin" readonly="readonly"/> <input type=text name=dateMax id="dateMax" readonly="readonly"/> <select name=channel_id id="channel_id "> <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="" > 发布人 </option> </select> <input type=text name=txtSearch size=" "></input> <input type=submit value="搜索"></input> </form> </div> <! 搜索层end > <! 第一个div层start > <table id="table_ " cellpadding= cellspacing= width= % > <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" " type=text size=" " onkeyup="words_deal(this );"></input>剩余<span > </span>个字<br /> </td> </tr> <tr> <th width=>缩略图:</th> <td> <table> <td> <input name=txtSmallPic type=text id="text" size=" "/> <input name=btnUpdown type=submit value="本地上传" /> <input name=btnChoose type=submit value="站内选择" /> <input name=btnCut type=submit value="裁切" /> </td> <td><img src=thumbnail ico /></td> </table> </td> </tr> <tr> <th width=>自定义属性 </th> <td> <input id="cDiyAtrr" type=checkbox /> 首页头条推荐 <input id="cDiyAtrr" type=checkbox /> 首页焦点图推荐 <input id="cDiyAtrr" type=checkbox /> 视频首页每日热点 <input id="cDiyAtrr" type=checkbox /> 视频首页头条推荐 <input id="cDiyAtrr" type=checkbox /> 视频首页焦点图 <input id="cDiyAtrr" type=checkbox /> 首页图片推荐<br></br> <input id="cDiyAtrr" type=checkbox /> 栏目首页推荐 <input id="cDiyAtrr" type=checkbox /> 视频栏目精彩推荐 <input id="cDiyAtrr" type=checkbox /> 网站顶部推荐 </td> </tr> <tr> <th width=>TAG标签</th> <td> <input id="txtTag" type=text size=""/> ( 号分开单个标签小于字节) </td> </tr> </table> <! 第一个div层end > <! 第二个div层start > <table id="table_ " cellpadding=cellspacing=width=% > <tr> <th width=>附加选项</th> <td> <input id="cDiyAtrr" type=checkbox /> 提取第一个图片为缩略图 <input id="cWatermark" type=checkbox /> 图片是否加水印 </td> </tr> <tr><th width=>分页选项</th> <td> <input id="rdoManual" type=radio /> 手动 (分页符为 #p#分页标题#e# ) <input id="rdoAutomatic" type=radio /> 自动大小: <input id="txtPage" type=text />K </td> </tr> <tr> <th width=> 评论选项</th> <td> <input id="rdoAllow" type=radio /> 允许评论 <input id="rdoBan" type=radio /> 禁止评论 </td> </tr> <tr> <th width=><span>*</span> 标题</th> <td> <input name=title " type=text size=" " id="TextArea" onkeyup="words_deal(this );"/> 剩余<span > </span>个字<br /> </td> </tr> <tr> <th width= > 文章排序 </th> <td colspan=" "> <select id="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(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 ); //文章列表菜单栏效果控制函数 function fun_search(dom id) //控制搜索层显示或隐藏 if(id!= ) $(" article_search") toggle("fast" function() ); //控制切换样式 var className = $(dom) attr("class"); if(className != on ) $( search_table a ) removeClass( on ); $(dom) addClass( on ); </script> </> cha138/Article/program/Java/JSP/201311/20099