애니메이션 탐색 효과를 얻기 위해 자바스크립트를 사용하는 코드_javascript 기술

누가 이런 내비게이션을 사용하고 있는지
구글은 전 세계에 발자취를 남기고 있는데, 한국의 구글 애니메이션 효과가 참 좋습니다. js를 너무 많이 썼어요? 좋아요, 해보자!
원칙
저는 어렸을 때부터 만화를 보는 걸 좋아했어요. 그림으로 (아? 그렇다면 호리병박 형제 한 명을 위해 몇 장의 그림을 그려야 합니까? -_-! ) 사실 지금 우리도 같은 일을 하고 있습니다. 작은 그림이 많이 들어 있는 그림을 사용하여 애니메이션 궤적을 보여 주는 것입니다. . 시간에 맞춰 그림을 움직여 보세요. 그러면 그림이 움직이지 않나요?(모르겠어요, 명확하게 표현해 주셨나요... 중국어가 엄청 중요해요!!)
준비
사진이 필요해요 , 뇌, 그리고 웃는 얼굴(웃지 않으면 효과가 나오지 않습니다...) 아래는 제가 준비한 사진들입니다(PS레벨 제한^_^)...

코드

위 사진을 보고 상상해보세요. 얼마나 아름답게 움직이는지...

css

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

.Gnb_btn_div{
width:90px;
height:75px> Overflow:hidden;
디스플레이:블록;
위치:절대;

.Gnb_btn_img{
너비:100%
디스플레이:블록; 🎜> 오버플로:숨김;
텍스트 들여쓰기:-500px;
}
#gnb_btn_01 .Gnb_btn_img {
배경 이미지:url(http://www.wler.cn/blog/img /friend.gif)
}


javascript

코드 복사

코드 다음과 같습니다.

xhtml




코드 복사


코드는 다음과 같습니다.

친구 찾기 var GNB1=new GNB(document.getElementById("gnb_btn_01"));//단일 버튼을 인스턴스화합니다. 물론 여러 개의 버튼이 있을 수 있습니다.
// ]]> < ;/script>

데모 주소

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.