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解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
AngularJs表单验证实例详解
May 30 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
php生成HTML文件的类方法
2019/10/11 PHP
js常用函数 不错
2006/09/08 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python定时关机小脚本
2018/06/20 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python列表返回重复数据的下标
2020/02/10 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
化妆品促销方案
2014/02/24 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
学习之星事迹材料
2014/05/17 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
详解Python牛顿插值法
2021/05/11 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python