지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 버퍼링된 콘텐츠 축소 및 확장 효과_탐색 메뉴

버퍼링된 콘텐츠 축소 및 확장 효과_탐색 메뉴

WBOY
풀어 주다： 2016-05-16 19:08:42
원래의
1014명이 탐색했습니다.

ie5.5 및 firefox2.0과 호환됩니다(저는 이 두 가지 브라우저만 가지고 있기 때문에 해당 브라우저에서만 테스트했습니다)

blueidea의 많은 친구들이 콘텐츠 축소 및 확장 효과를 게시한 것을 봤습니다. 차이점은 버퍼링 효과입니다. 실행해 보시면 아실 겁니다. ㅎㅎ
최대 높이에도 고정된 값이 필요합니다. 관심 있는 친구들은 해결해 주시면 감사하겠습니다.
이 코드의 다른 부분은 업데이트 및 개선 후에 공개되지 않습니다. 캡슐화해야 할 경우에는 직접 하세요. ㅎㅎ

코드는 공유 및 학습용으로 공개됩니다. 타인의 저작물을 존중하고 상업적인 목적으로 사용하지 마세요!!

코드 복사 🎜>



<script>/* <BR>By Auntion <BR>QQ 82874972 <BR>javascript 및 ajax QQ를 좋아하는 친구를 환영합니다. , 함께 진행해 볼까요 ㅎㅎ<BR>사용 방법<BR>호출 효과: Effect(1,2) <BR> 1은 변경되는 개체의 ID <BR> 2는 컨트롤 컨테이너의 ID입니다. . Use: this.parentNode.id에서 찾을 수 있습니다(상위 태그의 ID) <BR>주어줄 때 객체 ID를 반복하지 않도록 주의하세요. <BR>*/ <BR>함수 $G( Read_Id) { return document.getElementById(Read_Id) } <BR>function Effect(ObjectId,parentId){ <BR> if ($G(ObjectId).style.display == 'none'){ <BR> Start(ObjectId, '열기') <BR> $G( parentId).innerHTML = "<a href=# onClick=javascript:Effect('" ObjectId "','" parentId "');>닫기</a>" <BR> }else{ <BR> 시작(ObjectId,'Close') <BR> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('" ObjectId "','" parentId "');>Open< /a>" <BR> } <BR>} <BR>function Start(ObjId,method){ <BR>var BoxHeight = $G(ObjId).offsetHeight; 개체의 최소 높이<BR>var MaxHeight = 130;                                                                                                          객체의 최대 높이 <BR>var BoxAddMax = 1; 속도가 빨라진다] <BR> var Reduce = (BoxAddMax - Every_Add); <BR>var Add = (BoxAddMax Every_Add); <BR>if (method == "Close"){ <BR> var Alter_Close = function(){ //가상 감소 ] 루프 <BR> BoxAddMax /= 감소 <BR> BoxHeight -= BoxAddMax <BR> if (BoxHeight <= MinHeight){ <BR> $G (ObjId).style.display = "none"; window.clearInterval(BoxAction); <BR> } <BR> else $G(ObjId).style.height = BoxHeight; <BR>} <BR>var BoxAction = window.setInterval(Alter_Close,1); <BR>else if (method == "Opens"){ <BR>var Alter_Opens = function(){ //가상 [증가] 루프 구성<BR> BoxAddMax *= Add <BR> BoxHeight = BoxAddMax; > if (BoxHeight >= MaxHeight){ <BR> $G(ObjId).style.height = MaxHeight; <BR> window.clear Interval(BoxAction) <BR> }else{ <BR> $G(ObjId) .style.display= "block"; <BR> $G(ObjId).style.height = BoxHeight; <BR> } <BR>} <BR> var BoxAction = window.setInterval(Alter_Opens,1); } <BR>} <BR></script>


<본문>

  
    
      关闭
    
  


  
    
      这

        里

        是

        第

        두

        ,

        很

        정

        常

    
  


  
    
      ▲    
  




  
    
      关闭
    
  


  
    
      这

        里

        是

        第

        一

        ,

        很

        정

        常

    
  


  
    
      ▲    
  




둘 다 휴무입니다

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

하나 열려 있고 다른 하나는 닫혀 있습니다.
▲
<script> /* By Auntion QQ 82874972 使用方法 调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. */ function $G(Read_Id) { return document.getElementById(Read_Id) } function Effect(ObjectId,parentId){ if ($G(ObjectId).style.display == 'none'){ Start(ObjectId,'Opens'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" } } function Start(ObjId,method){ var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 var MinHeight = 5; //定义对象最小高度 var MaxHeight = 130; //定义对象最大高度 var BoxAddMax = 1; //递增量初始值 var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] var Reduce = (BoxAddMax - Every_Add); var Add = (BoxAddMax + Every_Add); if (method == "Close"){ var Alter_Close = function(){ //构建一个虚拟的[递减]循环 BoxAddMax /= Reduce; BoxHeight -= BoxAddMax; if (BoxHeight <= MinHeight){ $G(ObjId).style.display = "none"; window.clearInterval(BoxAction); } else $G(ObjId).style.height = BoxHeight; } var BoxAction = window.setInterval(Alter_Close,1); } else if (method == "Opens"){ var Alter_Opens = function(){ //构建一个虚拟的[递增]循环 BoxAddMax *= Add; BoxHeight += BoxAddMax; if (BoxHeight >= MaxHeight){ $G(ObjId).style.height = MaxHeight; window.clearInterval(BoxAction); }else{ $G(ObjId).style.display= "block"; $G(ObjId).style.height = BoxHeight; } } var BoxAction = window.setInterval(Alter_Opens,1); } } </script> <script> /* By Auntion QQ 82874972 使用方法 调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. */ function $G(Read_Id) { return document.getElementById(Read_Id) } function Effect(ObjectId,parentId){ var Obj_Display = $G(ObjectId).style.display; if (Obj_Display == 'none'){ Start(ObjectId,'Opens'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>关闭" }else{ Start(ObjectId,'Close'); $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('"+ObjectId+"','"+parentId+"');>打开" } } function Start(ObjId,method){ var BoxHeight = $G(ObjId).offsetHeight; //获取对象高度 var MinHeight = 5; //定义对象最小高度 var MaxHeight = 130; //定义对象最大高度 var BoxAddMax = 1; //递增量初始值 var Every_Add = 0.15; //每次的递(减)增量 [数值越大速度越快] var Reduce = (BoxAddMax - Every_Add); var Add = (BoxAddMax + Every_Add); //关闭动作************************************** if (method == "Close"){ var Alter_Close = function(){ //构建一个虚拟的[递减]循环 BoxAddMax /= Reduce; BoxHeight -= BoxAddMax; if (BoxHeight <= MinHeight){ $G(ObjId).style.display = "none"; window.clearInterval(BoxAction); } else $G(ObjId).style.height = BoxHeight; } var BoxAction = window.setInterval(Alter_Close,1); } //打开动作************************************** else if (method == "Opens"){ var Alter_Opens = function(){ BoxAddMax *= Add; BoxHeight += BoxAddMax; if (BoxHeight >= MaxHeight){ $G(ObjId).style.height = MaxHeight; window.clearInterval(BoxAction); }else{ $G(ObjId).style.display= "block"; $G(ObjId).style.height = BoxHeight; } } var BoxAction = window.setInterval(Alter_Opens,1); } } </script>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
美化下的

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
관련 라벨：
带缓冲的 收缩与展开内容效果
원천：php.cn
이전 기사：javascript_javascript 스킬로 레이어를 생성하는 코드 조각 다음 기사：JavaScript 암호화 및 복호화를 위한 7가지 방법 요약 및 분석_Hacker Nature
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
쿼리와 수식은 새 열로 전체 테이블을 형성합니다. 여기서 새 열은 다른 조건부 열 값을 포함하는 수식입니다. 편집: 수식은 "값" 열(카테고리를 기준으로 user_id가 가장 낮은 "값" 열)이어야 합니다. 따라서 카테고리 "...
에서 2024-04-06 21:23:40
0
2
530
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
흰색으로 설정된 HR 태그가 반투명한 이유는 무엇입니까? 나는 HTML(부트스트랩 포함)과 CSS를 가지고 있습니다. 내 HTML에는 클래스가 있는 <hr> 태그가 있고 CSS에는 테두리 스타일이 있습니다. ...
에서 2024-04-06 16:13:26
0
1
500
window.open() 및 data: 구성표를 사용하여 계산 문서 열기 새 브라우저 탭에서 열려는 계산된 HTML 문서를 생성하는 브라우저에서 실행되는 웹 페이지가 있습니다. 간단하고 지저분한 방법은 다음과 같이 하는 것입니다: co...
에서 2024-04-06 15:06:34
0
1
378
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿