>  기사  >  웹 프론트엔드  >  Jquery UI 진동 효과 구현 원리 및 steps_jquery

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

WBOY
WBOY원래의
2016-05-16 17:42:261151검색

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

이 목적을 달성하려면 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);
})


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

전체 코드는 아래 첨부합니다
코드 복사 코드는 다음과 같습니다