집 >
웹 프론트엔드 >
JS 튜토리얼 >
JQuery(주니어 버전)_javascript 기술을 기반으로 Apple 데스크탑의 Dock 효과를 모방합니다.
JQuery(주니어 버전)_javascript 기술을 기반으로 Apple 데스크탑의 Dock 효과를 모방합니다.
WBOY
풀어 주다: 2016-05-16 17:49:04
원래의
1405명이 탐색했습니다.
새로운 날과 새로운 시작 오늘 공유하고 싶은 것은 JQuery를 사용하여 Apple 운영 체제 데스크톱의 Dock 효과를 흉내내는 것입니다. 주니어 버전이라고 불리는 이유는 아직 몇 가지 버그가 있기 때문입니다. 그것과 디스플레이 효과가 안정적이지 않습니다. 시간적 제약으로 인해 이러한 버그는 아직 수정되지 않았습니다. 전문가들이 조언을 해주고 더 나은 의견을 제공할 수 있기를 바랍니다.
몇 달 전에 방정식을 푸는 것을 잊어버렸기 때문에 마우스가 움직일 때 나타나는 아이콘 증폭 알고리즘은 단지 개인적인 생각일 뿐이며 전문가들이 더 나은 알고리즘을 생각해 낼 수 있기를 바랍니다. 또한, 여기서는 마우스를 수평으로 이동시키는 알고리즘만 고려하고, 마우스를 수직으로 이동시키는 알고리즘은 아직 추가하지 않았습니다.
//그림 중앙의 수평 좌표를 가져옵니다 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; 마우스 수직 위치의 수평 위치를 가져옵니다.
마우스가 천천히 움직이면 표시 효과는 괜찮습니다. 그러나 마우스를 빠르게 움직이면 아이콘이 커지지만 해당 버그도 나타납니다.
수정과 더 나은 알고리즘을 위한 귀중한 제안을 해주신 모든 전문가와 마스터를 진심으로 초대합니다.