jQuery 회전 플러그인 - 회전 지원(예:/Firefox/SafariOpera/Chrome)_jquery

인터넷에서 매우 흥미로운 jQuery 회전 플러그인을 발견했습니다. 이는 Internet Explorer 6.0, Firefox 2.0, Safari 3, Opera 9 및 Google Chrome을 지원하며 고급 브라우저에서는 Transform이 사용되고 하위 버전에서는 VML이 사용됩니다. IE의.

호출 및 방법:

rotate(angle)

angle 매개변수: [Number] - 기본값은 0 - 주어진 값에 따라 이미지를 회전합니다. 각도

예:

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

$("# img").rotate(45);

rotate(parameters)

parameters 매개변수: [Object] 회전 매개변수를 포함하는 객체입니다. 지원되는 속성:
1.angle 속성 : [숫자] - 기본값 0 - 회전 각도 수, 즉시 실행
예:

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

$("#img").rotate({angle:45});

2.bind 속성: [Object] 객체, 회전하는 객체에 바인딩된 이벤트를 포함합니다. 이벤트 내부의 $(this)는 회전 개체를 가리킵니다. 따라서 $(this).rotate(…) 내부에서 호출을 연결할 수 있습니다. 예(화살표 클릭):

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

$ ("#img ").rotate({bind:{

클릭: function(){

$(this).rotate({

각도: 0,

animateTo:180
})
}
}
});

3.animateTo 속성: [숫자] – 기본값 0 – 현재 각도 값에서 주어진 각도 값(또는 주어진 각도 매개변수)까지 회전에 애니메이션을 적용합니다. 예: 위의 예와 함께 사용법을 참조하세요.
4.duration 속성 : [Number] - animateTo를 사용하여 애니메이션 실행 기간을 지정합니다. 예를 들어(화살표 클릭):

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

$("#img").rotate({bind:{
click: function(){
$(this ).rotate({
기간:6000,
각도: 0,
animateTo:100
})
}
}
});

5.step 속성: [Function] – 각 애니메이션 단계에서 실행되는 콜백 함수, 현재 각도 값을 함수의 첫 번째 매개변수로 사용
6. easing 속성: [Function] – 기본값(아래 참조) – 애니메이션을 더욱 자연스럽게 만드는 데 사용되는 easing 함수입니다. http://gsgd에서 easing을 지원하려면 5개의 매개변수(x,t,b,c,d)가 필요합니다. .co.uk/sandbox/jquery/easing/(자세한 내용은 해당 웹사이트의 설명서를 참조하세요.) jQueryRotate!Default 함수에서 사용하기 전에 easing 플러그인을 포함하는 것을 잊지 마세요:

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

function (x, t, b, c, d) { return -c * ((t=t /d-1)* t*t*t - 1) b; }

여기: t: 현재 시간,
b: begInnIng 값,
c: 변경 값,
d: 기간,
x: 사용되지 않음
이징 없음(선형 이징):

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

function(x, t, b, c, d) { return (t/d)*c }

예(클릭) 화살표):

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

$("#img" ).rotate({bind:{
click : function(){
$(this).rotate({
angle: 0,
animateTo:180,
easing: $.easing .easeInOutElastic
})
}
}
});

7. 콜백 속성 : [함수] 예를 들어(화살표 클릭):

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

$("#img").rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180 ,
콜백: function(){ 경고(1) }
} )
}
}
});

getRotateAngle

이 함수는 단순히 회전된 개체의 현재 각도를 반환합니다.

예:

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

$("#img").rotate({
angle: 45,
bind: {
click : function(){
alert($(this).getRotateAngle ());
}
}
});

stopRotate

이 함수는 단순히 진행 중인 회전 애니메이션을 중지합니다.

예:

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

$("# img").rotate({
바인딩: {
클릭: function(){
$("#img").rotate({
각도: 0,
animateTo: 180,
기간: 6000
});
setTimeout(function(){
$("#img").stopRotate();
},
}
}
});

이것을 사용하여 회전과 관련된 많은 웹페이지 특수효과를 구현하는데 사용하여 큰 복권바퀴를 만들었는데 효과가 좋습니다. , 하지만 플래시만큼 부드럽지는 않고 기본적으로 실행될 수 있습니다 ㅎㅎ .

jqueryrotate 프로젝트 주소: http://code.google.com/p/jqueryrotate/

코드 예: http://code.google.com/p/jqueryrotate/wiki/Examples

차근차근 올라가세요