Jquery UI 진동 효과 구현 원리 및 steps_jquery
- WBOY원래의
- 2016-05-16 17:42:261155검색
블로그 페이지의 특정 부분에 독자의 관심을 끌고 싶다면 광고와 같이 이러한 부분을 진동하게 만들 수 있습니다. 오늘 기사에서는 페이지의 요소를 진동시키는 방법을 소개합니다.
이 목적을 달성하려면 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);
})
$('#shake').효과('shake', { times:3 }, 100)
}
$(document ).ready(function() {
var shake = setInterval(interval, 500);
})
여기서 최신 버전을 가져왔습니다.
전체 코드는 아래 첨부합니다
코드 복사 코드는 다음과 같습니다