JQuery 를 통 해 win 8 과 같은 멋 진 동적 스티커 효과 구현(예시 코드)

저 는 개인 적 으로 마이크로소프트 차세 대 제품 을 매우 좋아 합 니 다.먼저 제품 의 성숙 여 부 를 상관 하지 않 지만 새로운 제품 을 가 져 왔 습 니 다.새로운 것 이란 사용자 체험 에서 애플 의 최근 몇 년 동안 의 성공 으로 인해 모든 제품 이 그의 화면 을 모방 하 게 되 었 다 는 것 을 말한다.안 드 로 이 드 를 포함 하여 여러분 의 느낌 이 어떤 지 모 르 겠 지만 어쨌든 저 는 이런 사각형 에 심미 적 피로 가 생 겼 습 니 다.(애플 과 안 드 로 이 드 의 팬 들 은 뿌리 지 마 세 요.여 기 는 화면 에서 만 평가 하 는 것 입 니 다.사실은 전체적으로 볼 때...마이크로소프트 는 아직도 차이 가 있다)그 당시 에 wp 의 출시 가 눈 에 띄 었 고 바로 Metro 스타일 의 제품 을 좋아 하 게 되 었 다.지금까지 wp8 과 win 8 은 점점 성숙 해 지기 시작 했다.
잘 쓰 지 못 했 습 니 다.여러분 의 지적 과 비판 을 환영 합 니 다.이유 없 이 쏟 아 지 는 것 을 환영 하지 않 습 니 다.대신 돌아 가세 요.
잔말 말고 본론 으로 들 어가 라.기본 사상 은 외부 div 를 정의 하고 고정 높이(예 를 들 어 본 사례 의 180 px)를 정의 하 며 속성 overflow:hidden(경계선 을 초과 한 부분 숨 기기)을 설정 한 다음 에 이 div 에서 내부 div 를 정의 하고 속성 position:relative(상대 적 인 레이아웃 사용)를 설정 하 는 것 입 니 다.이 내부 div 에서 우 리 는 그림 을 정의 합 니 다.그 높이 를 외부 div 높이 와 같이 설정 해 야 합 니 다(예 를 들 어 본 사례 의 180 px).div 에 문 자 를 넣 는 것 을 정의 합 니 다.이 div 의 높이 도 외부 div 높이 와 같 습 니 다(예 를 들 어 본 사례 의 180 px,만약 에 padding 을 주 었 다 면 높이 는 상응 하 게 줄 어 들 고 전체 div 가 180 px 의 높이 에 이 르 도록 합 니 다).레이아웃 코드 는 다음 과 같 습 니 다 html:

<div id="outside">
    <div id="inside">
        <img width="180px" height="180px" src="http://xxxxxxxxx    " />
        <div id="text">
            <span>  JQuery  win8           </span>
            <p>  </p>
            <p>                 ……</p>
        </div>
    </div>
</div>

css:

#outside
{
    height:180px;
    overflow:hidden;
}
#inside
{
    position:relative;
}
#text
{
    width:160px;
    height:160px;
    background:#0000ff;
    padding:10px;
    color:#fff;
}

남 은 것 은 JQuery 의 일 입 니 다.먼저 이'동적 마 그 네 틱 스티커'의 동작 을 이해 해 보 세 요.처음에 그림 을 표시 한 다음 에 위로 미끄러져 문 자 를 표시 하고 잠시 머 물 렀 다가 아래로 미끄러져 그림 을 표시 합 니 다.이렇게 순환 합 니 다.우 리 는 먼저 함 수 를 정의 합 니 다.

function go(id, d1, px1, val1, d2, px2, val2) {
    $(id).delay(d1);
    $(id).animate({ bottom: px1 }, val1, function () {
        $(id).delay(d2);
        $(id).animate({ bottom: px2 }, val2);
    });
}

여기 7 개의 인자 가 있 습 니 다.id 는 내부 div,즉 미 끄 러 질 div 의 id 입 니 다.d1 은 내부 div 가 미 끄 러 진 후에 머 무 르 는 시간 입 니 다.px1 은 내부 div 가 위로 미 끄 러 지 는 상대 적 인 위치 입 니 다.기본 적 인 현재 위 치 는 0px 이 고 val 1 은 내부 div 의 완성 상 향 미끄럼 동작 에 필요 한 시간 입 니 다.d2 는 아래로 div 를 미 끄 러 진 후에 머 무 르 는 시간 입 니 다.px2 는 아래로 미 끄 러 지 는 상대 적 인 위치 입 니 다.여 기 는 여전히 원래 의 위치 가 0px 이 고 val 2 는 아래로 미 끄 러 지 는 것 을 완성 하 는 데 필요 한 시간 입 니 다.
그 다음 에 우 리 는 페이지 로 딩 이 완 료 될 때 타 이 머 를 설정 하여 우리 가 정의 하 는 go 함 수 를 실행 합 니 다.

$(function () {
    timer1 = setInterval(function () {
        go("#inside", 1500, "180px", 1200, 1000, "0px", 2000);
    }, 3000);
});

이곳 의 인 자 는 필요 에 따라 수정 할 수 있 습 니 다.여기 서 타 이 머 는 3 초 에 한 번 씩 go 함 수 를 실행 하도록 합 니 다.원본 코드 가 기본적으로 붙 어 있 으 며 원본 파일 이 필요 한 어린이 신발 은 세 게 칠 수 있다여기.