> 웹 프론트엔드 > JS 튜토리얼 > 깜박이는 텍스트 효과를 얻기 위해 jquery를 사용하는 방법

깜박이는 텍스트 효과를 얻기 위해 jquery를 사용하는 방법

coldplay.xixi
풀어 주다: 2021-01-07 18:18:37
원래의
2537명이 탐색했습니다.

jquery를 사용하여 깜박이는 텍스트 효과를 얻는 방법: 먼저 최신 메모의 pid를 가져온 다음 메모를 성공적으로 추가한 후 깜박이는 메서드를 함수에 작성하고 마지막으로 직접 호출할 수 있습니다. 깜박임 타이머가 필요하면 타이머를 켜세요.

깜박이는 텍스트 효과를 얻기 위해 jquery를 사용하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1 버전, Dell G3 컴퓨터.

권장: jquery 비디오 튜토리얼

jquery를 사용하여 깜박이는 텍스트 효과를 얻는 방법:

1 먼저, 최신 메모의 pid를 가져와야 합니다. 백그라운드에서 인터페이스.

2. 추가가 성공하면 메모가 깜박입니다.

3. 깜박이는 방법을 함수에 작성하고 직접 호출할 수 있습니다.

4. 깜박이는 경우 타이머가 있어야 합니다. 타이머를 켜면 타이머를 꺼야 합니다.

예: 페이지가 열릴 때 깜박입니다.

코드 예:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>闪动提示</title> 
<style>  
  *{ margin:0; padding:0;} 
   
  .box{color: #000} 
  
  .red{color:#d00;} 
 </style> 
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> 
<script>  
  function shake(element,className,times){ 
      var i = 0, 
  t = false , 
  o = element.attr("class"), 
  c = "", 
  timestimes = times||2; 
 
      if(t) return; 
 
      t = setInterval(function(){ 
i++; 
c = i%2 ? o + &#39; &#39; + className : o; 
element.attr("class",c); 
 
if(i==2*times){ 
  clearInterval(t); 
  element.removeClass(className); 
  } 
},200); 
 
      }; 
  $(function(){ 
    //domready 就闪动 
    shake($(".box"),"red",3); 
    });    
</script> 
</head> 
 <body> 
<div class="box">打开就闪动</div> 
</body> 
</html>
로그인 후 복사

다음 코드는 두 종류의 클릭 깜박임과 양식 입력 오류 깜박임과 같은 다양한 확인 깜박임을 프롬프트합니다.

코드 샘플:

//点击闪动 
$("#box1").bind({ 
    click:function(){ 
shake($(this),"red",3); 
return false; 
} 
}); 
//通不过mail校验闪动 
$("#mail").blur( 
    function(){ 
 if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test($(this).val())) { 
shake($(this),"red",3); 
    } 
} 
);
로그인 후 복사

관련 학습 권장 사항:javascript 비디오 튜토리얼

위 내용은 깜박이는 텍스트 효과를 얻기 위해 jquery를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿