집 >웹 프론트엔드 >JS 튜토리얼 >JQuery(안정 버전)를 기반으로 Apple 데스크탑 Dock 효과 시뮬레이션_jquery

JQuery(안정 버전)를 기반으로 Apple 데스크탑 Dock 효과 시뮬레이션_jquery

WBOY원래의: 2016-05-16 17:49:021373검색

내 최신 결과를 모든 사람과 공유하고 싶습니다. 실제로 코드는 이전 버전과 매우 유사합니다.

총리는 HTML 페이지 코드입니다:

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

jQuery Dock

script type="text/javascript " src="js/dock.js">

< ;/a>

< img alt="역사" src="images/history.png" />

해당 CSS 코드도 추가하세요.

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

#topMenu {

높이:128px; 
줄 높이:250px; 
배경 이미지:url(../images/dock- bg1.png); 
#topMenu img{ 
너비: 50px; 
테두리:없음; 해당 JS 코드는 다음과 같습니다. 




코드 복사

코드는 다음과 같습니다.

$ (function(){ $(this).mousemove( function(e){ var mouseY =parseInt(e.pageY); if(mouseY<136 && mouseY>8){ var mouseX = parsInt(e.pageX); $( "#topMenu img").each(function(){ var obj = $(this);

var objWidth = obj.css(" width");

//그림 중앙의 수평 좌표를 가져옵니다
var objX =parseInt(obj.offset().left)parseInt(objWidth.substr(0,objWidth.length-2)) /2;
var x = Math.abs(objX-mouseX)
if(x<75){
obj.css("width",(128-((78*x*x) /(75*75))) "px").css("높이",( 128-((78*x*x)/(75*75))) "px")
}else{
obj.css("너비","50px").css("높이" ,"50px")
}
})
}else{
$("#topMenu img").each(function(){
$(this).css( "너비","50px").css("높이","50px");
});
}
});
});
이전 버전과 비교했을 때 가장 큰 변화는 JS에서 페이지 위에서 마우스를 움직일 때 mousemove 이벤트가 발생한다는 점입니다. mousemove 메서드에서는 먼저 페이지 위의 마우스 수직 좌표를 얻어서 마우스가 작동 가능한 도크 메뉴에 있습니다. 마우스가 이 범위 내에 없으면 모든 아이콘이 초기 상태로 복원되고, 마우스가 이 범위 내에 있으면 마우스의 수평 좌표가 복원됩니다. 페이지의 데이터는 계속해서 획득되며 mouseX를 사용하여 이를 기록합니다. 동시에 페이지 내 그림 중앙의 수평 좌표를 구하고 objX를 사용하여 해당 값을 저장합니다. (x로 기록된) mouseX와 objX의 차이 절대값이 75보다 작으면 현재 그림의 작동 가능 범위에 들어가고 마우스가 움직일 때 특정 그림의 너비를 나타내기 위해 y를 사용하여 도크 효과가 트리거됩니다(단순화를 위해 이 예에서 사용된 아이콘 너비와 높이는 동일합니다). y=128-78*x2/752 방정식을 사용합니다. 마우스 위치와 그림 크기 사이의 관계를 나타냅니다. x가 75보다 크면 해당 그림이 복원됩니다.
이 예제 과정에서 IE의 작은 버그가 발견되었습니다. 태그 중간에 있는 내용이 인 경우 img 테두리에 CSS 스타일이 없으면 IE는 img에 파란색 테두리를 추가합니다. CSS 스타일을 에 추가하더라도 IE에서는 border:none;을 추가합니다. img, 귀찮은 파란색 색상이 나타납니다. 아래 사진은 개선된 버전의 데모 사진입니다. 읽어주셔서 감사합니다.
JQuery(안정 버전)를 기반으로 Apple 데스크탑 Dock 효과 시뮬레이션_jquery

JQuery(안정 버전)를 기반으로 Apple 데스크탑 Dock 효과 시뮬레이션_jquery

성명：

이전 기사：js new Date()_javascript 기술에서 NaN 발생 분석다음 기사：js new Date()_javascript 기술에서 NaN 발생 분석

JQuery(안정 버전)를 기반으로 Apple 데스크탑 Dock 효과 시뮬레이션_jquery

관련 기사