1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | //People 마우스 오버 jQuery(".mainPeople>a").each(function(){ jQuery(this).mouseenter(function(event){ w = jQuery(this).width() h = jQuery(this).height() x = ( event.pageX - jQuery(this).offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ), y = ( event.pageY - jQuery(this).offset().top - ( h/2 )) * ( h > w ? ( w/h ) : 1 ), direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4; jQuery(this).find(".peopleA").show(); if(direction == 0) { jQuery(this).find(".peopleA").css({"top":-h, "left":0}); } else if(direction == 1) { jQuery(this).find(".peopleA").css({"top":0, "left":w}); } else if(direction == 2) { jQuery(this).find(".peopleA").css({"top":h, "left":0}); } else { jQuery(this).find(".peopleA").css({"top":0, "left":-w}); } jQuery(this).find(".peopleA").stop().animate({top:0, left:0}, 500, "easeOutExpo"); }); jQuery(this).mouseleave(function(event){ w = jQuery(this).width() h = jQuery(this).height() x = ( event.pageX - jQuery(this).offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ), y = ( event.pageY - jQuery(this).offset().top - ( h/2 )) * ( h > w ? ( w/h ) : 1 ), direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4; if(direction == 0) { jQuery(this).find(".peopleA").stop().animate({top:-h, left:0}, 500, "easeOutExpo", function(){jQuery(this).parent().find(".peopleA").hide();}); } else if(direction == 1) { jQuery(this).find(".peopleA").stop().animate({top:0, left:w}, 500, "easeOutExpo", function(){jQuery(this).parent().find(".peopleA").hide();}); } else if(direction == 2) { jQuery(this).find(".peopleA").stop().animate({top:h, left:0}, 500, "easeOutExpo", function(){jQuery(this).parent().find(".peopleA").hide();}); } else { jQuery(this).find(".peopleA").stop().animate({top:0, left:-w}, 500, "easeOutExpo", function(){jQuery(this).parent().find(".peopleA").hide();}); } }); | cs |
'World Wide Web > jquery' 카테고리의 다른 글
| 다른 페이지로 벗어날때 인터벌 정지시키기 (0) | 2014.05.07 |
|---|---|
| jquery로 css 백그라운드 이미지 변경 (2) | 2014.04.03 |
| jquery.color.js 사용법 (0) | 2014.01.15 |
| $(document).ready(function(){})와 $(function(){}) (0) | 2014.01.06 |
| IE9에서 jquery css height 버그 (0) | 2013.08.30 |