javascript代码实例教程-jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

发布时间:2019-04-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

已经有两年多没登陆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--> 
<p class="mainbox">
                <!--导航栏strat-->  
<p 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>
</p>
                <!--导航栏end--> 

                <!--搜索层start-->
 <p 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="" >---&nbsp;全部栏目&nbsp;---</option>
<c:foreach items="${list}" var="list">
<option value="${list.id}">---&nbsp;${list.name}&nbsp;---</option>
</c:forEach>
</select>&nbsp;
<select name="choose">
<option value="" >---&nbsp;查询条件&nbsp;---</option>
<option value="" >---&nbsp;&nbsp;&nbsp;&nbsp;ID&nbsp;&nbsp;&nbsp;&nbsp;---</option>
<option value="" >---&nbsp;&nbsp;&nbsp;标题&nbsp;&nbsp;&nbsp;---</option>
<option value="" >---&nbsp;&nbsp;&nbsp;简介&nbsp;&nbsp;&nbsp;---</option>
<option value="" >---&nbsp;&nbsp;发布人&nbsp;&nbsp;---</option>
</select>&nbsp;
<input type="text" class="input-text" name="txtSearch" size="30"></input>
<input type="submit" class="button" value="搜索"></input>
</form>
         </p>
         <!--搜索层end-->  

         <!--第一个p层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="" >---&nbsp;全部栏目&nbsp;---</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"/>&nbsp;&nbsp;
<input name="BTnUpdown" type="submit" value="本地上传"  class="button"/>&nbsp;&nbsp;
<input name="btnChoose" type="submit" value="站内选择"  class="button"/>&nbsp;&nbsp;
<input name="btnCut" type="submit"  value="裁切"  class="button"/>&nbsp;&nbsp;&nbsp;&nbsp;
</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=""/> &nbsp;&nbsp;(','号分开,单个标签小于12字节)
</td>
</tr>
</table>
                <!--第一个p层end--> 
               
                <!--第二个p层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" />&nbsp;&nbsp; 提取第一个图片为缩略图 &nbsp;&nbsp;
 <input id="chkWatermark" type="checkbox" />&nbsp;&nbsp;图片是否加水印
  </td>
</tr>
<tr>
<th width="140">分页选项</th>
<td>
<input id="rdoManual" type="radio" class="input-text" /> 手动 (分页符为: #p#分页标题#e# )&nbsp;
<input id="rdoAutomatic" type="radio" class="input-text" />&nbsp;&nbsp;自动  大小:&nbsp;&nbsp;
<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"/>&nbsp;&nbsp;允许评论 &nbsp;&nbsp;
 <input id="rdoBan" type="radio" class="input-text" />&nbsp;&nbsp;禁止评论
</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>
                <!--第二个p层end-->  
</p>
         <!--包含层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>


 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果全部内容,希望文章能够帮你解决javascript代码实例教程-jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。