그누보드 - 혹시 이런 효과를 줄 수 있을까요?

혹시 이런 효과를 줄 수 있을까요? 정보

혹시 이런 효과를 줄 수 있을까요?

엘남매아빠 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 (115.♡.♡.30)
2014.08.22 01:28:08
1,137

본문

위에는 움직이는 이미지인데..

처음에는 움직임이 없다가 마우스를 올리면 저렇게 움직이는 효과를 낼려고 하는데 혹시 저런 기능 가능하나요?

플래쉬 말고.. jQuery나 소스로 가능할까요??

css3로 여러 기능이 있기는 하지만 css3는 익스에서는 안되는 경우가 많고, 크롬이나 파폭만 되는 경우가 많아서..

브라우저 환경 안타고 구현할려고 하면 혹시 가능한 방법이 있을런지요..

댓글 8개

벤지 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

(180.♡.♡.36)

14.08.22 02:00:07

http://jsfiddle.net/73pXD/
이걸 응용해 보시겠어요.

[추가]
잠시 짬내서 해봤습니다...위의 링크에서 소스 부분을 아래와 같이 바꿔 보세요.

var angle = 0;
var chk = 0;
setInterval(function(){
if(chk==0) {
if(angle++< 20) $("#image").rotate(angle);
else chk=1;
}
else {
if(angle--> -20) $("#image").rotate(angle);
else chk=0;
}
},2);

엘남매아빠 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

(115.♡.♡.30)

14.08.22 02:44:18

와~~ 대단하시네요..
짬내서 하신것 치고는..ㅠㅠ
저도 언능 jQuery 랑 공부해야하는데.ㅠㅜ

근데 혹시 마우스를 올렸을 때 움직이고 뗐을 때 고정되게는 어떤식으로 해야할까요>??
벤지님께서 작성해주신 소스에 mouseover이벤트를 이리저리 줘봐도 반응이 전혀 없어버리네요.ㅠㅜ

벤지 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

(180.♡.♡.36)

14.08.22 03:23:04

jquery 1.7 기준으로 한거예요....1.11 인가부터는 mouseenter, mouseleave 을 이용하시거나 다른 이벤트가 있어요.
참고로 실제 ie6~8 을 실행시키셔서 확인하셔야만 하는데,
여러가지 ie 체크 툴들이 제대로 확인 가능하게 지원 못하거든요.

var rIntervalId;

$("#image").mouseover(function(){
var angle = 0;
var chk = 0;
rIntervalId = setInterval(function(){
if(chk==0) {
if(angle++< 20) $("#image").rotate(angle);
else chk=1;
}
else {
if(angle--> -20) $("#image").rotate(angle);
else chk=0;
}
},2);
}).mouseout(function(){
clearInterval(rIntervalId);
$("#image").rotate(0);
});