마우스 따라 움직이는 효과

 

 

 

 

 

마우스가 li 에 접근하면 

마우스 위치로 .box 를 이동한뒤 가운데로 animate 를 통해 이동시킨다 (마우스를 따라 움직이는것처럼 보이도록)

활성화된 li에 active 클래스를 추가

 

이때 기존 active 는 영역 밖으로 이동시켜 버려야함!

(mouseleave 이벤트를 등록하지만 가끔 제대로 동작하지 않는 경우도 있어서 추가해줌 - 무조건 1개만 active 되도록) 

$(document).on('mouseenter','li:not(.active)',function(e){
  target = $(this).children('.box');
  liTop = $(this).offset().top;
  liLeft = $(this).offset().left;
  currentX = e.pageX;
  currentY = e.pageY;
  topVal = currentY - liTop;
  leftVal = currentX - liLeft;
  
  if(topVal < 10){
    topVal = -200;
  } else if(topVal > liHeight){
    topVal = liHeight;
  }
  if(leftVal < 10){
    leftVal = -200;
  } else if(leftVal > liWidth){
    leftVal = liWidth;
  }
  $("li.active").css({
    top: topVal,
    left: leftVal,
  }).removeClass("active");
  $(this).addClass('active');
  
  target.css({
    top: topVal,
    left: leftVal,
  }); 
  
  target.animate({
    top: '75px',
    left: '75px',
  }, 200, function() {
    // Animation complete.
  });
  
});

 

active 된 li에서 마우스가 벗어나면 

.box 를 마우스위치에 따라서 영역 밖으로 이동시킨다

$(document).on('mouseleave','li.active', function(e){
  target = $(this).children('.box');
  liTop = $(this).offset().top;
  liLeft = $(this).offset().left;
  currentX = e.pageX;
  currentY = e.pageY;
  topVal = currentY - liTop;
  leftVal = currentX - liLeft;
   if(topVal < 10){
    topVal = -200;
  } else if(topVal > liHeight){
    topVal = liHeight;
  }
  if(leftVal < 10){
    leftVal = -200;
  } else if(leftVal > liWidth){
    leftVal = liWidth;
  }
  $(this).removeClass('active');
  target.animate({
    top: topVal,
    left: leftVal,
  }, 200, function(){
    
  });
  
})