jQuery로 플래시 텍스트 효과를 만듭니다

코어 포인트

이 튜토리얼은 깜박이는 텍스트 효과를 달성하고 웹 사이트 스타일과 호소력을 향상시키는 크로스 브라우저 호환 JQuery 플러그인을 만드는 방법을 안내합니다. 플러그인은 또한 접근성 문제를 고려하고

메소드 정지 효과를 제공합니다.

플러그인의 이름은 "Audero Flashing Text"이며 jQuery 플러그인 모범 사례에 따라 개발되었습니다. 기본 설정, 초기화, 시작, 정지 및 메소드가 포함됩니다. 이 방법은 표시 할 텍스트를 제어하고, 페이드, 지속 시간, 페이드 아웃 시간 및 텍스트 선택 순서가 선택된 순서를 제어합니다.
• stop() 메소드는 효과를 실행하기 때문에 플러그인의 가장 중요한 부분입니다. 지정된 영역 내에 떠 다니는 요소를 생성하는 것이 포함되며,
함수는 DOM에서 생성 된 요소를 제거한 다음 다음, 이전, 이전 또는 임의의 문자열을 사용하여 현재 구성을 기반으로 효과를 다시 실행합니다.
• 튜토리얼은 플러그인 사용 및 페이드 아웃 시간 및 텍스트 선택 순서와 같은 설정을 조정하는 예로 끝납니다. "Audero Flashing Text"플러그인은 무료이며 MIT 및 GPL-3.0의 이중 라이센스에 따라 수정 또는 개선 될 수 있습니다. isRunning
때로는 웹 사이트의 모양과 느낌을 향상시키고 방문자의 관심을 끌기 위해 멋진 효과가 필요합니다. 웹 사이트의 스타일을 향상시키기 위해 시장에서 사용할 수있는 무료 및 인스턴트 플러그인이 많이 있습니다. 이 튜토리얼을 사용하면 주어진 영역 내에서 무작위로 배치 된 무작위 크기의 플래시 텍스트를 생성하는 크로스 브라우저 JQuery 플러그인을 개발할 수 있습니다. 또한 접근성 문제를 고려할 것입니다 (결국, 우리는 플래시 텍스트에 대해 이야기하고 있습니다), 효과를 막기위한 방법을 제공합니다. 이 플러그인을 사용하면 같은 페이지의 여러 애니메이션이 가능하며 각 애니메이션은 다른 애니메이션과 완전히 독립적입니다. 최종 결과는 페이지에 쉽게 포함시킬 수있는 JavaScript 파일입니다. 이 플러그인을 만들려면 jQuery 플러그인에서 제안한 지침을 따르므로 JQuery 플러그인 모범 사례를 사용하여 개발됩니다. 나는 이미이 주제를 내 게시물에서 "jQuery 플러그인으로 크로스 브라우저 컨텍스트 메뉴 구현"에 설명했습니다. 또한 지금부터 플러그인을 "Audero Flashing Text"라고합니다.
• 시작 start() fadeOut() 이제 "Audero Flashing Text"의 시작점을 보여 주 었으므로 포함 할 방법을 이해해야합니다. 플러그인을 초기화하는 방법과 효과를 시작하는 메소드가 필요하다고 상상하기는 어렵지 않습니다. 초기화 함수는 일부 기본값을 활용하여 특정 값이 설정되지 않으면 사용됩니다. 또한 이전 섹션에서 언급했듯이 사용자에게 중지 효과를 제공하는 기능이 좋습니다. 마지막으로, 효과가 실행되는지 테스트하는 방법을 갖는 것이 유용 할 수 있습니다. 따라서 플러그인에는 다음이 포함됩니다
  기본 설정 메소드 메소드 메소드 메소드
  • 기본 설정 사용자가 특정 설정을 지정하지 않으면 특정 기본 구성을 갖는 것이 항상 유용합니다. "Audero Flashing Text"의 기본 속성은 표시 할 텍스트 세트이며 배열을 사용하여 지정할 수 있습니다. 우리는 깜박이는 텍스트를 가질 것이기 때문에 텍스트가 할 행동은 다음과 같습니다. 1. 천천히 눈에 띄게, 2. 잠시 동안 보이고 3. 천천히 사라집니다. 이 동작에 따라 다른 유용한 설정은 페이드 인 시간, 지속 시간 및 페이드 아웃 시간입니다. 마지막으로 추가 할 설정은 선택 사항이며,이를 통해 사용자는 텍스트 선택을 선택한 순서를 선택할 수 있습니다.
  에 대한 가능한 값은
  • , init() 및 init () 메소드
  • 우리는 start() 메소드를 사용하여 플러그인이 호출되는 방법을 테스트하고 효과를 실행할 영역을 스타일링합니다. 하나의 매개 변수 인 객체 만 허용하며, 여기에는 적어도 표시 할 문자열 배열이 포함되어 있지만 기본값을 무시하는 값도 포함되어 있습니다. 또는 매개 변수없이 함수를 호출 할 수 있으며,이 경우 기본값이 적용됩니다. 이 경우 표시 될 문자열 세트는 선택한 요소의 자식 노드의 텍스트를 사용합니다. 후자의 방법을 사용하면 플러그인을 즉시 실험 할 수 있습니다. 테스트 후 메소드는 CSS 속성을 사용하여 선택한 요소의 자식 요소를 숨기므로 영역의 높이가 감소하지 않습니다. 이 시점에서 마지막으로해야 할 일은 애니메이션을 실행하기 위해
  기능을 호출하는 것입니다.
  • 에 대한 코드는 다음과 같습니다 stop() start () 메소드 이것은 실제로 효과를 실행하는 코드가 포함되어 있기 때문에 플러그인의 가장 중요한 부분입니다. 다음 세 매개 변수를 수용합니다
  • - 객체를 구성합니다. isRunning() - 표시 할 문자열.
  - 효과가 적용되는 영역의 ID.
  방법

  메소드와 마찬가지로 먼저 매개 변수를 테스트합니다. 그 후, 지정된 영역에 떠있는 selection 요소를 만듭니다. 생성 후, 요소는 보이지 않으므로 (random), 페이드 방법을 사용하여 천천히 나타날 수 있습니다. 나중에 볼 수 있듯이 함수에는 DOM에서 생성 된 요소를 제거한 다음 다음, 이전 또는 임의의 문자열을 사용하여 현재 구성을 기반으로 효과를 다시 실행하는 콜백 함수가 있습니다. 이 방법의 마지막 몇 줄은 요소가 영역의 크기에 맞도록 위치를 설정합니다. ascending

  var defaultValues = {
    strings: [], // 要显示的字符串数组
    fadeIn: 300, // 以毫秒为单位的时间
    duration: 500, // 以毫秒为单位的时间
    fadeOut: 300, // 以毫秒为单位的时间
    selection: "random" // 文本选择的顺序。可能的值：“random”、“ascending”、“descending”
  };

  stop () 메소드 <🎜 🎜> <🎜 🎜>

  메소드는 애니메이션을 중지하고 DOM에서 마지막 생성 된

  요소를 제거한 다음 일반 가시성 속성을 복원하는 데 사용됩니다. 아래 소스 코드에서 볼 수 있듯이 텍스트는 원활하게 제거됩니다. 이 메소드는 먼저 애니메이션 (jQuery <🎜 🎜 메소드)을 중지 한 다음 텍스트를 사라져 화면에서 천천히 사라지게 한 다음 DOM에서 제거합니다 (jQuery <🎜 🎜 메소드). .

  stop() isrunning () 메소드 <🎜 🎜> 이 방법은 주어진 요소가 깜박임 효과를 실행하는지 테스트하기 때문에 이해하기 쉽습니다. 테스트 프로세스는 클래스 <🎜 <span>의 stop() 요소를 확인합니다. 하나 이상의 요소가 발견되면 메소드가 fadeOut()를 리턴하고, 그렇지 않으면 remove()가 반환됩니다. 설명 된 코드는 다음과 같습니다

  이 플러그인을 사용하는 방법

  init: function(options) {
    if (typeof options === "undefined" || options === null) {
      options = {};
    }
    if (typeof options.strings === "undefined" || options.strings == null) {
      if (this.children().size() === 0) {
        $.error("如果您没有指定要显示的文本，则该元素必须至少有一个子元素");
        return;
      } else {
        options.strings = this.children().map(function() {
          return $(this).text();
        });
      }
    }
  
    this.css("position", "relative");
    this.children().css("visibility", "hidden");
  
    methods.start($.extend({}, defaultValues, options), null, this.attr("id"));
  }

  <<> 이제 모든 방법을 보았으므로 이제 몇 가지 예제를 확인해야합니다. 다음

  : <🎜 🎜>가 있다고 가정 해 봅시다

  단락의 텍스트 실행 효과를 사용하려면 다음을 수행하기 만하면됩니다.

  다음은 이전과 동일한 태그를 사용하지만 다른 설정을 사용하는 예입니다. audero-flashing-text <🎜 🎜> <<> 결론 <span> true 이 기사에서는 주어진 영역에 깜박이는 텍스트 효과를 만드는 jQuery 플러그인을 만드는 방법을 보여줍니다. 작동 방식을 보려면 소스 코드를 다운로드하고 저장소에 포함 된 문서를보십시오. "Audero Flashing Text"플러그인은 완전히 무료입니다. MIT 및 GPL-3.0에 대한 이중 라이센스가 있기 때문에 변경하거나 더 개선 할 수도 있습니다. false

  <<> (FAQ)는 입력 텍스트의 FAQ 부분과 일치하여 jQuery를 사용하여 플래시 텍스트 효과를 생성 할 때 추가해야하지만 일부 재 작성 및 간소화를 수행하여 더 간결하고 명확하게 만들 수 있습니다.

  start: function(settings, index, idElem) {
    if (typeof idElem === "undefined") {
      idElem = this.selector;
    }
    if (typeof settings === "undefined") {
      $.error("无效的方法调用：未指定设置");
      return;
    }
    if (index == null) {
      if (settings.selection === "ascending")
        index = 0;
      else if (settings.selection === "descending")
        index = settings.strings.length - 1;
      else
        index = Math.floor(Math.random() * settings.strings.length);
    }
  
    var $text = $("<span>")
      .text(settings.strings[index])
      .addClass("audero-flashing-text") // 这用作书签，以帮助停止方法
      .css({
        position: "absolute",
        display: "none",
        fontSize: (Math.random() * 2 + 0.5) + "em"
      })
      .appendTo("#" + idElem)
      .fadeIn(settings.fadeIn)
      .animate({ opacity: 1 }, settings.duration) // 模拟延迟
      .fadeOut(settings.fadeOut, function() {
        // 删除当前元素
        $(this).remove();
        var nextIndex;
        if (settings.selection === "ascending")
          nextIndex = (index + 1) % settings.strings.length;
        else if (settings.selection === "descending")
          nextIndex = (index === 0) ? settings.strings.length : index - 1;
        else
          nextIndex = Math.floor(Math.random() * settings.strings.length);
        // 再次启动效果
        methods.start(settings, nextIndex, idElem);
      });
    // 设置位置，以便元素适合区域的大小
    var posX = Math.floor(Math.random() * ($("#" + idElem).width() - $text.outerWidth()));
    var posY = Math.floor(Math.random() * ($("#" + idElem).height() - $text.outerHeight()));
    // 设置文本的位置
    $text.css({
      left: posX + "px",
      top: posY + "px"
    });
  }

위 내용은 jQuery로 플래시 텍스트 효과를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!