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 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
webpack打包多页面的方法
Nov 30 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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
十天学会php之第九天
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
input 高级限制级用法
2009/03/26 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
Python中扩展包的安装方法详解
2017/06/14 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python文件写入write()的操作
2019/05/14 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python中six模块基础用法
2019/12/08 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
党员专题组织生活会发言材料
2014/10/17 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
宪法宣传标语100条
2019/10/15 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL