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


Posted in Javascript onJuly 01, 2013

已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼。
路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记。

这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式、dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能点。分别为:

1.利用jquery自身的toggle()函数实现层的隐藏与显示动画;
2.仿新浪、腾讯微博输入框字符动态递减效果(可作为单独的js,引入即可通用);
3.实现几个导航按钮切换不同的内容,类似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实现两个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;} 
/*控制文章字数输入样式*/ 
.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> 
/*控制文章字数输入函数*/ 
$(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)//判断是否大于限制字符数量 
{ //如果大于限制级字符数量,获得从0到该限制数量的所有字符串 
var totalNum=$(dom).val().substr(0,num); 
$(dom).val(totalNum); //将这些字符重新载入文本框,并弹框提示 
alert("超过字数限制,多出的字将被截断!" ); 
} 
else 
{ 
if(curLength>num-10) 
{//如果输入字符为倒数10个字符时改变样式将字体变红 
$('.textCount_'+id).addClass("textAfter"); 
} 
else 
{//否则移除样式 
$('.textCount_'+id).removeClass("textAfter"); 
} 
$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示 
} 
} 
//文章列表菜单栏效果控制函数 
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="" >---  发布人  ---</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="站内选择" 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" /> 网站顶部推荐 
</td> 
</tr> 
<tr> 
<th width="140">TAG标签</th> 
<td> 
<input id="txtTag" class="input-text" type="text" size=""/>   (','号分开,单个标签小于12字节) 
</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'); 
} 
} 
//文章列表菜单栏效果控制函数 
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>

以下是运行的效果图:
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换 
ps:代码规范很重要,养成加注释的好习惯。
Javascript 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
Vue 组件注册实例详解
Feb 23 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 #Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 #Javascript
原生javascript兼容性测试实例
Jul 01 #Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 #Javascript
批量实现面向对象的实例代码
Jul 01 #Javascript
js原生appendChild的bug解决心得分享
Jul 01 #Javascript
Jquery时间验证和转换工具小例子
Jul 01 #Javascript
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
关于PHP语言构造器介绍
2013/07/08 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
YII框架http缓存操作示例
2019/04/29 PHP
php经典趣味算法实例代码
2020/01/21 PHP
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
python转换摩斯密码示例
2014/02/16 Python
Python标准库defaultdict模块使用示例
2015/04/28 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
AOP的定义以及作用
2013/09/08 面试题
幼儿园国庆节活动方案
2014/02/01 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
银行求职信范文
2019/05/13 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android