JQuery를 사용하여 win8과 동일한 멋진 동적 타일 효과 얻기(샘플 코드)_jquery

저는 개인적으로 Microsoft의 차세대 제품을 매우 좋아합니다. 제품이 성숙했는지 여부에 관계없이 새로운 제품을 제공합니다. 소위 브랜드 뉴(Brand New)는 최근 몇 년 동안 Apple의 성공으로 인해 Android를 포함한 모든 제품이 인터페이스를 모방하게 되었습니다. 어쨌든, 저는 이러한 둥근 직사각형에 지쳤습니다. Apple과 Android는 불평하지 마세요. 이것은 단지 인터페이스에 대한 평가일 뿐입니다. 사실 Microsoft는 전반적으로 여전히 격차가 있습니다.) wp의 출시로 인해 눈이 빛났고 즉시 Metro 스타일에 반했습니다. 오늘날 wp8과 win8은 점점 더 성숙해지기 시작했습니다.

글이 좋지 않다면 정정하고 비판하는 것은 환영하지만, 이유 없이 비난하는 것은 환영받지 못합니다. 신이시여, 잠시 우회해 주십시오.

쓸데없는 소리는 그만하고 요점으로 들어가세요. 기본 아이디어는 다음과 같습니다. 고정 높이(예: 이 예에서는 180px)로 외부 div를 정의하고 Overflow:hidden 속성을 설정합니다(경계 너머 부분 숨기기). 그런 다음 이 div에서 내부 div를 정의하고 position:relative(상대 레이아웃) 속성을 설정합니다. 이 내부 div에서는 그림을 정의하고 높이를 외부 div의 높이(예: 이 예에서는 180px)와 동일하게 설정한 다음 텍스트를 넣을 div를 정의합니다. div는 외부 div의 높이와도 동일합니다(예: 이 예에서는 180px, 패딩을 제공하면 전체 div의 높이가 180px이 되도록 높이가 줄어듭니다). 레이아웃 코드는 다음과 같습니다
html:

 

  
                                                                 ~ > > 🎜>
css :

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

{ 높이:180px; 오버플로:숨김;} #inside{ 위치:상대;

}

#text
{
너비:160px;
높이:160px;
배경:#0000ff;
패딩:10px;
색상:#fff;
}


나머지는 JQuery입니다. 먼저 이 "동적 타일"의 동작을 이해합니다. 먼저 그림을 표시한 다음 위로 밀어 텍스트를 표시하고 잠시 머물렀다가 아래로 밀어 그림을 표시하는 등의 작업을 수행합니다. 먼저 함수를 정의해 보겠습니다.




코드 복사


코드는 다음과 같습니다.

function go (id, d1 , px1, val1, d2, px2, val2) {

$(id).delay(d1); $(id).animate({ 하단: px1 }, val1, 함수() { $(id).delay(d2); $(id).animate({ 하단: px2 }, val2); });}

여기서 7개의 매개변수, id는 슬라이드할 div인 내부 div의 ID, d1은 내부 div가 위로 슬라이드한 후 머무르는 시간, px1은 위로 슬라이드할 내부 div의 상대 위치, 기본값입니다. 현재 위치는 0px이고, val1은 내부 div가 위쪽으로 슬라이딩하는 동작을 완료하는 데 걸리는 시간입니다. d2는 div를 아래쪽으로 슬라이딩한 후 머무르는 시간입니다. 여기서, 원래 위치는 다음과 같습니다. 여전히 0px이고 val2는 하향 슬라이딩을 완료하는 데 필요한 시간입니다.

그런 다음 페이지가 로드될 때 정의한 go 기능을 실행하도록 타이머를 설정합니다.




코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

$(함수 () {
타이머1 = setInterval(함수 () {
go("#inside", 1500, "180px", 1200, 1000, "0px", 2000);
}, 3000);
});

여기서 매개변수는 필요에 따라 수정할 수 있습니다. 여기서는 타이머가 3초마다 이동 기능을 실행하도록 합니다.
소스코드는 기본적으로 게시되어 있습니다. 소스파일이 필요하신 분은 여기를 클릭하여다운받으실 수 있습니다.