jquery는 숨기기 및 표시 애니메이션 효과/입력 상자 문자의 동적 감소/탐색 버튼을 구현합니다.

csdn 계정에 로그인한지 2년이 넘었습니다. 중간에 딴짓을 하다가 지금은 프로그램으로 복귀했는데, 프론트엔드로 바뀌어서 많은 걸 잊어버렸습니다. 여전히 내 사고 방식을 교정하고 속도를 늦추고, 프런트 엔드를 돌아다니며 행복한 물고기자리가 되어야 합니다.
길은 한걸음씩 걷고, 지식은 조금씩 쌓이고, 기록은 재산이 됩니다. 자, 함께 요약하고 메모하는 법을 배워보세요.

더 나은 상호작용성을 얻으려면 제가 배경 기사를 작성했던 일부 페이지에 어떤 효과를 주어야 한다는 것은 의심할 여지 없이 최선의 선택이지만 브라우저의 호환성이 항상 만족스럽지 않았기 때문입니다. jquery 프레임워크를 사용하면 CSS 스타일, DOM 노드 및 자체 기능을 통해 더 나은 사용자 경험을 얻을 수 있습니다. 이 사례에는 세 가지 기능적 포인트가 있습니다.

1. jquery의 자체 토글() 기능을 사용하여 레이어 숨기기 및 표시 애니메이션을 구현합니다.
2. Sina 및 Tencent Weibo 입력 상자 문자의 동적 감소 효과를 모방합니다. 별도의 js를 사용하면 보편적으로 사용할 수 있습니다.
3. 탭과 유사하게 여러 가지 탐색 버튼을 구현합니다.

코드 복사 코드는 다음과 같습니다.

<script> <BR>/*控制文章字数输入函数*/ <BR>$(function(){ <BR>$("td span").addClass('textCount');//页面加载时为所有span标签添加新浪字体样式 <BR>}) <BR>/* <BR>words_deal函数是一个可以通用的关于仿新浪字符输入的函数，用在网站的文章编辑上可以提高用户的交互性 <BR>dom：当前要操作的对象 <BR>num：限制字符数量 <BR>id:通过传入id值动态添加需要操作的span <BR>*/ <BR>function words_deal(dom,num,id) <BR>{ <BR>var curLength=$(dom).val().length; //获取文本框中输入的文字总数量 <BR>if(curLength>num)//判断是否大于限制字符数量 <BR>{ //如果大于限制级字符数量，获得从0到该限制数量的所有字符串 <BR>var totalNum=$(dom).val().substr(0,num); <BR>$(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示 <BR>alert("超过字数限制，多出的字将被截断！" ); <BR>} <BR>else <BR>{ <BR>if(curLength>num-10) <BR>{//如果输入字符为倒数10个字符时改变样式将字体变红 <BR>$('.textCount_'+id).addClass("textAfter"); <BR>} <BR>else <BR>{//否则移除样式 <BR>$('.textCount_'+id).removeClass("textAfter"); <BR>} <BR>$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示 <BR>} <BR>} <BR>//文章列表菜单栏效果控制函数 <BR>function fun_search(dom,id){ <BR>//控制搜索层显示或隐藏 <BR>if(id!=1){ <BR>$(".article_search").toggle("fast",function(){ <BR>}); <BR>} <BR>//控制切换样式 <BR>var className = $(dom).attr("class"); <BR>if(className != 'on'){ <BR>$('.search_table a').removeClass('on'); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR></script>

添加文章
高级设置
搜索

添加时间：
-


--- 全部栏目 ---

--- ${list.name} ---

 

--- 查询条件 ---
---    ID    ---
---   标题   ---
---   简介   ---
---  发布人  ---
 

*

--- 모든 열 ---

* 标题

剩余40个字

缩略图:

自定义属性

首页头条推荐
首页焦点图推荐
视频首页每日热点
视频首页头条推荐
视频首页焦点图
首页图片推荐

栏目首页推荐
视频栏目精彩推荐
网站顶部推荐

TAG标签

  (','号分开，单个标签小于12字节)

/ 테이블>



<script> <BR>//인터페이스 전환<BR>function toOpen(dom,id){ <BR>var className = $(dom).attr("class") <BR>if(className ! = 'on'){ <BR>$('table[id^=table_]').hide() <BR>$('.mainnav_title ul a').removeClass('on') <BR> $ ('#table_' id).show(); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR>//글 목록 메뉴바 효과 조절 기능<BR> function fun_search(dom,id){ <BR>//검색 레이어 표시 또는 숨기기 제어<BR>if(id!=1){ <BR>$(".article_search").toggle("fast", function( ){ <BR>}) <BR>} <BR>//전환 스타일 제어<BR>var className = $(dom).attr("class") <BR>if(className != 'on ') { <BR>$('.search_table a').removeClass('on') <BR>$(dom).addClass('on') <BR>} <BR>} <BR>< /script&gt ; <BR> <BR><BR> <BR>다음은 작업의 렌더링입니다. <BR> <BR>ps: 코드 사양은 매우 중요하므로 개발해야 합니다. 댓글을 추가하는 좋은 습관.</script>

附加选项	提取第一个图片为缩略图      图片是否加水印
分页选项	手动 (分页符为： #p#分页标题#e# )    自动 大小:   K
评论选项	允许评论      禁止评论
* 标题	剩余20个字
文章排序	默认排序 置顶一周 置顶一月