js 마우스 운동 효과 따라 가기

본 논문 의 사례 는 js 마우스 가 효과 에 따라 보 여 주 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.명령 을 사용 하여 기본 구 조 를 만 듭 니 다 ul.cursor Play\#cursor Play>li*12>a>img+div>span
2.span 태그 에 필드 추가
3.기본 스타일 설정

cursor Play 의 너비 992 px,높이 600 px

cursor Play li 배경 은 흰색 이 고 안쪽 거 리 는 8px 이 며 바깥쪽 거 리 는 5px 이 며 왼쪽 유동 으로 표 시 됩 니 다

cursor Play li a,cursor Play li a img 은 블록 으로 표시 되 며 상대 적 인 레이아웃

cursor Play li a added overflow:hidden

cursor Play li a div 는 절대 레이아웃 이 고 너비 와 높이 는 100%이 며 배경 색 을 rgba 로 설정 합 니 다.

4.js 동적 효과 추가(방향 0,1,2,3 은 각각 위,오른쪽,아래,왼쪽)
1.마 우 스 를 연결 해서 들 어가 거나 나 가 는 이벤트

$("#cursorPlay li").on("mouseenter mouseleave",function(event){
var evType = event.type;
var direction = getDir($(this), {
x: event.pageX,
y: event.pageY
});
//  console.log("evtype:"+evType+",dir:"+direction);
moveTo($(this),direction, evType);
});

2、getDir 를 사용 하여 마우스 가 움 직 이 는 방향,coordinates 좌 표를 가 져 옵 니 다.
마우스 획 입 방향 함수 계산(검색 키워드"jquery 계산 마우스 획 출 방향")

direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
function getDir($el, coordinates){
var w = $el.width(),
h = $el.height(),
x = (coordinates.x - $el.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
y = (coordinates.y - $el.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return direction;
}

3.이동 함수 moveto 를 추가 합 니 다.세 개의 매개 변 수 는 선택 기,방향,마우스 로 그림 을 그 리 는 유형 입 니 다.마우스 로 그 리 는 유형 을 판단 하여 선택 기의 초기 위 치 를 정의 한 다음 css 스타일 을 다시 정의 합 니 다.마우스 로 그 릴 때 각 방향의 위 치 를 다시 정의 합 니 다.

function moveTo($el, direction, type){
  var $layer = $el.find("div");
  var coord = {};
  if(type === "mouseenter"){
    switch(direction){
     case 0 :   $layer.css("top","-100%").css("left","0px");break;
    case 1 : $layer.css("left","100%").css("top","0px");break;
    case 2 : $layer.css("top","100%").css("left","0px");break;
    case 3 : $layer.css("left","-100%").css("top","0px");break;
  }
    coord = {left:0,top:0}
  }else{
  switch(direction){
    case 0 : coord = {left:0,top:'-100%'};break;
    case 1 : coord = {left:'100%',top:0};break;
    case 2 : coord = {left:0,top:'100%'};break;
    case 3 : coord = {left:'-100%',top:0};break;
  }
}
$layer.animate(coord,300);
} 

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.