Jquery UI 진동 효과 구현 원리 및 steps

집

웹 프론트엔드

JS 튜토리얼

Jquery UI 진동 효과 구현 원리 및 steps_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:42 PM

ui충격

블로그 페이지의 특정 부분에 독자의 관심을 끌고 싶다면 광고와 같이 이러한 부분을 진동하게 만들 수 있습니다. 오늘 기사에서는 페이지의 요소를 진동시키는 방법을 소개합니다.

이 목적을 달성하려면 Jquery와 Jquery UI를 사용해야 합니다.
먼저 그림이나 div,span 등의 일반 DOM 요소가 될 수 있는 shake 블록을 만들고 요소의 이름을 shake로 지정할 수 있습니다.

사진은 다음과 같이 사용합니다.

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

 
< ;img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/> 

Jquery UI에는 요소를 진동시키는 기성 방법이 없습니다. 이를 달성하려면 구문은 다음과 같습니다.

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

effect('shake', options, speed)

매개변수 옵션(세 가지가 있습니다) 매개변수는 여기):
·times: 요소가 흔들리는 횟수 지정
•distance: 요소의 진동 진폭 지정
•Direction: 요소의 진동 방향 지정
다음은 구체적인 구현 방법은 진동을 3번 설정하고 500ms마다 진동을 호출하는 것입니다:

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

함수 간격() { 
$('#shake').효과('shake', { times:3 }, 100) 
} 
$(document ).ready(function() { 
var shake = setInterval(interval, 500); 
}) 

 

여기서 최신 버전을 가져왔습니다.

전체 코드는 아래 첨부합니다

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.