Latest web development tutorials

jQuery를 UI 예 - 특수 효과 (효과)

애니메이션 효과 소자의 적용.

더에 대한 자세한 내용은 .effect() 방법의 세부 사항은 API 문서를 참조하십시오 .effect을 () .

.effect () 데모

효과를 미리보기 버튼을 클릭합니다.

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 효과 - .effect () 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
    .toggler {폭 : 500 픽셀, 높이 200 픽셀; 위치 : 상대;}
    #button {패딩 : .5em 1em; 텍스트 장식 : 없음;}
    #effect {폭 : 240 픽셀, 높이 : 135px; 패딩 : 0.4em; 위치 : 상대;}
    #effect H3 {여백 : 0; 패딩 : 0.4em; 텍스트 정렬 : 센터;}
    .ui-효과 전송 {국경 : 2 픽셀 점선 회색;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    // () {현재 선택된 효과 기능 runEffect을 실행
      //은 () .val ( "#effectTypes") 효과 형 VAR selectedEffect = $ 파생;
 
      // 효과의 대부분은} {기본 배달 옵션 VAR 옵션 = 입력 할 필요가 없습니다;
      // 필요한 매개 변수와 일부 특수 효과 경우 (selectedEffect === "규모") {
        옵션 = {퍼센트 : 0};
      } 그렇지 경우 (selectedEffect === "전송") {
        옵션 = {에 "#button"클래스 이름 : "UI 효과 전송"};
      } 그렇지 경우 (selectedEffect === "크기") {
        옵션 = {에 {폭 : 200, 높이 : 60}};
      }
 
      // 실행 효과 $ ( "#effect") .effect (selectedEffect, 옵션, 500, 콜백);
    };
 
    // 콜백 함수 콜백 () {
      에서는 setTimeout (함수 () {
        $ ( "#effect") .removeAttr ( "스타일") .hide () fadeIn ();
      }, 1000);
    };
 
    () {선택한 메뉴 효과 $ ( "#button") .click (기능에 따라 값을 설정 //
      runEffect ();
      false를 반환;
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 클래스 = "toggler">
  <사업부 아이디 = "효과"클래스 = "UI 위젯 콘텐츠 UI 코너 - 모든">
    <H3 클래스 = "UI 위젯 헤더 UI 코너 - 모든"> 특수 효과 (효과) </ H3>
    <P>
      Etiam 리베로 neque는가 lorem. Sed의 PEDE. Nulla의가 lorem metus, adipiscing 유타, 나오지도 luctus, hendrerit 이력서, 마일에서 언제나하는, eleifend 선관위을 luctus.
    </ P>
  </ DIV>
</ DIV>
 
<선택 이름 = "효과"ID = "effectTypes">
  <옵션 값 = "블라인드"> 음영 효과 (블라인드 효과) </ 옵션>
  <옵션 값 = "바운스"> 효과 (바운스 효과) 회복 </ 옵션>
  <옵션 값 = "클립"> 클립 효과 (클립 효과) </ 옵션>
  <옵션 값 = "드롭"> 방문 효과 (드롭 효과) </ 옵션>
  <옵션 값 = "폭발"> 폭발 효과 (효과 분해) </ 옵션>
  <옵션 값 = "페이드"> 효과 (페이드 효과) 페이드 </ 옵션>
  <옵션 값 = "배"> 효과를 접는 (특수 효과를 접) </ 옵션>
  <옵션 값 = "강조"> 하이라이트 효과 (효과를 강조) </ 옵션>
  <옵션 값 = "퍼프"> 확장 효과 (퍼프 효과) </ 옵션>
  <옵션 값 = "뛰다"> 효과 (맥동 효과)를 이길 </ 옵션>
  <옵션 값 = "규모"> 줌 효과 (스케일 효과) </ 옵션>
  <옵션 값 = "흔들"> 진동 효과 (떨림 효과) </ 옵션>
  <옵션 값 = "크기"> 크기 효과 (사이즈 효과) </ 옵션>
  <옵션 값 = "슬라이드"> 슬라이드 효과 (특수 효과 슬라이드) </ 옵션>
  <옵션 값 = "전송"> 이전 효과 (전송 효과) </ 옵션>
</ 선택>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> 실행 효과 </a>에
 
 
</ BODY>
</ HTML>

완화 데모

이 예제는 jQuery를 UI가 제공하는 모든 이징를 그릴, HTML 캔버스 요소를 사용합니다. 여유 동작을 보려면 각지도를 클릭하세요. .

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 효과 - 데모를 완화 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  .graph {
    플로트 : 왼쪽;
    여백 왼쪽 : 10px;
  }
  </ 스타일>
  <스크립트>
  $ (함수 () {
    만약 (! $ ( "<캔버스>") [0] .getContext) {
      $ ( "<DIV>")는 .text (
        "캔버스를 지원하지 않는 브라우저가이 브라우저에서 캔버스를 지원하기위한 필요성을 보여준다."
      ) .appendTo ( "#graphs");
      반환;
    }
 
    var에 나는 = 0,
      폭 = 100,
      높이 = 100;
 
    $ .each ($의 .easing, 기능 (이름, IMPL) {
      VAR 그래프 = $ ( "<div>") .addClass ( "그래프") .appendTo ( "#graphs"),
        텍스트 = $ ( "<div>")는 .text (+ + 내가 + "."+ 이름) .appendTo (그래프)
        포장 = $ ( "<div>") .appendTo (그래프) .CSS ( '오버 플로우', '숨겨진'),
        캔버스 = $ ( "<캔버스>") .appendTo (랩) [0]
 
      canvas.width = 폭;
      canvas.height = 높이;
      VAR drawHeight = 높이 * 0.8,
        cradius = 10;
        CTX = canvas.getContext ( "2D");
      ctx.fillStyle = "블랙";
 
      ) (배경 ctx.beginPath 그리기 //;
      ctx.moveTo (cradius, 0);
      ctx.quadraticCurveTo (0, 0, 0, cradius);
      ctx.lineTo (0, 높이 - cradius);
      ctx.quadraticCurveTo (0, 높이 cradius 높이);
      ctx.lineTo (폭 - cradius, 높이);
      ctx.quadraticCurveTo (폭, 높이, 폭, 높이 - cradius);
      ctx.lineTo (폭, 0);
      ctx.lineTo (cradius, 0);
      ctx.fill ();
 
      ctx.strokeStyle = "# 555"바닥 선을 그립니다 //;
      ctx.beginPath ();
      ctx.moveTo (폭 * 0.1, drawHeight + 0.5);
      ctx.lineTo (폭 * 0.9, drawHeight + 0.5);
      ctx.stroke ();
 
      ctx.strokeStyle = "# 555"상단 선을 그립니다 //;
      ctx.beginPath ();
      ctx.moveTo (폭 * 0.1, drawHeight * 0.3-0.5)
      ctx.lineTo (폭 * 0.9, drawHeight * 0.3-0.5)
      ctx.stroke ();
 
      완화 그리기 //
      ctx.strokeStyle = "흰색";
      ctx.beginPath ();
      ctx.lineWidth = 2;
      ctx.moveTo (폭 * 0.1, drawHeight);
      $의 .each (새로운 어레이 (폭), 기능 (위치) {
        VAR 상태 = 위치 / 폭,
          브로 = IMPL (상태, 위치 0, 1, 폭);
        0.1 * 0.8 + 폭 ctx.lineTo (위치,
          drawHeight - drawHeight * 발 * 0.7);
      });
      ctx.stroke ();
 
      동적으로 변화하는 클릭이 graph.click // (함수 () {
        포장
          .animate ({높이 : "숨기기"}, 2000, 명)
          .delay (800)
          .animate ({높이 : "쇼"}, 2000, 이름);
      });
 
      graph.width (폭) .height의 (높이 + text.height () + 10);
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 아이디 = "그래프"> </ DIV>
 
 
</ BODY>
</ HTML>