JQuery(주니어 버전)_javascript 기술을 기반으로 Apple 데스크탑의 Dock 효과를 모방합니다.

새로운 날과 새로운 시작 오늘 공유하고 싶은 것은 JQuery를 사용하여 Apple 운영 체제 데스크톱의 Dock 효과를 흉내내는 것입니다. 주니어 버전이라고 불리는 이유는 아직 몇 가지 버그가 있기 때문입니다. 그것과 디스플레이 효과가 안정적이지 않습니다. 시간적 제약으로 인해 이러한 버그는 아직 수정되지 않았습니다. 전문가들이 조언을 해주고 더 나은 의견을 제공할 수 있기를 바랍니다.

정적 렌더링입니다. 괜찮아 보입니다.

다음은 HTML 페이지의 코드입니다.

코드를 복사하세요. 코드는 다음과 같습니다.

"http://www.w3.org/TR/html4/strict.dtd"> 🎜>

< ;img alt="Link" src="images/link.png" />
🎜>

;/html>


CSS 장식이 없는 페이지는 형편없기 때문에 적절한 CSS를 사용하여 장식하는 것이 필수입니다

코드 복사

코드는 다음과 같습니다: #topBody{ height: 300px; } #topMenu{

height: 256px; 🎜>line-height: 256px;

}
#topMenu img{
height: 50px;
width: 50px;
}


몇 달 전에 방정식을 푸는 것을 잊어버렸기 때문에 마우스가 움직일 때 나타나는 아이콘 증폭 알고리즘은 단지 개인적인 생각일 뿐이며 전문가들이 더 나은 알고리즘을 생각해 낼 수 있기를 바랍니다. 또한, 여기서는 마우스를 수평으로 이동시키는 알고리즘만 고려하고, 마우스를 수직으로 이동시키는 알고리즘은 아직 추가하지 않았습니다.




코드 복사

코드는 다음과 같습니다.

$(function(){ $(" #topBody").mousemove(function(e){ var mouseX =parseInt(e.pageX); $("#topMenu img").each(function(){ var obj = $ (this);

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

//그림 중앙의 수평 좌표를 가져옵니다
var objX =parseInt(obj.offset() .left) parsInt(objWidth.substr (0,objWidth.length-2))/2;
var x = Math.abs(objX-mouseX)
if(x-75) {
obj.css( "너비",(128-((78*x*x)/(75*75))) "px")
obj.css("높이",(128- ((78*x*x) /(75*75))) "px");
}
})




JQuery의 마우스 획득 방법에 대해 이야기해 보겠습니다. mousemove(function(e){})를 실행할 때, 메서드의 매개변수 e는 수평 좌표를 얻기 위한 e.pageX와 수직 좌표를 얻기 위한 e.pageY를 ​​제공합니다. 또한 사용할 수 있습니다. var x = e.originalEvent.x || e.originalEvent.layerX || 0; 또한 var y = e.originalEvent.y || layerY || 0; 마우스 수직 위치의 수평 위치를 가져옵니다.

마우스가 천천히 움직이면 표시 효과는 괜찮습니다. 그러나 마우스를 빠르게 움직이면 아이콘이 커지지만 해당 버그도 나타납니다.

수정과 더 나은 알고리즘을 위한 귀중한 제안을 해주신 모든 전문가와 마스터를 진심으로 초대합니다.