간단한 셀 만들기[email protected]

Roller
두 번째 샘플, 하나하나 전시된 기저귀 제작법.
【기초지식】
롤러는 가로 길이의 블록 요소 중에서 가로 배열된 요소를 회전시켜 보인다.가로 블록 요소를 컨테이너라고 합니다.용기를 포위하는 블록 요소를 한층 더 준비하다.이 요소를 뷰라고 하며 컨테이너보다 작은 크기를 지정하면 뷰를 벗어난 부분을 숨길 수 있습니다.컨테이너의 위치 지정은 뷰의 상대 좌표입니다.
먼저 보기와 용기의 탭을 설명하고 id 속성을 설명합니다.

<div id="samp2v" class="view">
    <div id="samp2c" class="container">
    </div>
</div>

여기에도 CSS를 보낸 클라스가 함께 기술되어 있다.id로 지정하면 특별한 기술이 필요 없습니다.
그리고 회전된 요소를 용기에 넣으세요.이후의 간단한 계산을 위해 각 요소의 크기를 통일하다.여기에는 너비, 높이 80px, 좌우 가장자리 50px(CSS는 링크 목표의 샘플 코드를 참조하십시오)가 통일되어 있습니다.

<div id="samp2v" class="view">
    <div id="samp2c" class="container">
        <img src="img/roller/ig01.png" />
        <img src="img/roller/ig02.png" />
        <img src="img/roller/ig03.png" />
        <img src="img/roller/ig04.png" />
        <img src="img/roller/ig05.png" />
        <img src="img/roller/ig06.png" />
        <img src="img/roller/ig07.png" />
        <img src="img/roller/ig08.png" />
        <img src="img/roller/ig09.png" />
        <img src="img/roller/ig10.png" />
    </div>
</div>

오른쪽 단추와 왼쪽 단추를 만들고 하나씩 돌립니다.그림% 1개의 캡션을 편집했습니다.

<div id="samp2v" class="view">
    <div id="samp2c" class="container">
        <img src="img/roller/ig01.png" />
        <img src="img/roller/ig02.png" />
        <img src="img/roller/ig03.png" />
        <img src="img/roller/ig04.png" />
        <img src="img/roller/ig05.png" />
        <img src="img/roller/ig06.png" />
        <img src="img/roller/ig07.png" />
        <img src="img/roller/ig08.png" />
        <img src="img/roller/ig09.png" />
        <img src="img/roller/ig10.png" />
    </div>
    <nav id="tol2" class="tol" ><img src="img/toleft.png"/></nav>
    <nav id="tor2" class="tor" ><img src="img/toright.png"/></nav>
</div>

nav 탭에 id와class를 지정했지만, 이것은 CSS와 이후 처리를 적용할 때 사용하기 위해서 필요하지 않습니다.
그럼, 여기 도착하면 움직일 거야.
우선 jquery입니다.js와 롤러.js 포함.jquery.여기.에서 js를 얻을 수 있습니다.roller.처음 사이트에서 js를 다운로드하세요.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://nolib.jp/js/roller.min.js" ></script>

다음에 문서가 불러올 때 롤러화 보기와 용기를 사용합니다.script 탭에 다음과 같은 내용을 기술합니다.보기와 용기의 id 속성 값을 매개 변수로 설정합니다.

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c'});
});

기본적으로 회전은 일정한 시간 동안 관성 동작을 하기 때문에 관성 동작 시간을 0으로 지정하여 속도를 줄인다.

$(document).ready(function(){
var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0});
});

이렇게 하면 초기 디스플레이에 시작 요소가 표시되지 않습니다.위치가 엇갈린 설정값, 디스플레이에 60을 지정하고 중간에 설정합니다.

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60});
});

기본적으로 내부 요소의 크기는 자동으로 설정되지만 이번에는 내부 요소의 크기가 CSS에서 직접 지정되기 때문에 기능이 억제됩니다.그리고 롤러화가 끝난 후에 용기의 크기와 위치를 조정하는 함수를 호출합니다.

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60,
        autoadjustheight: false,
        autoadjustwidth: false});
    samp2.setWidth(true);
});

이렇게 보면 가지런해 보인다.그 후 칼로와 같은 동작을 할 수 있도록 하나를 이동한 뒤 동작을 멈추고 적당한 위치에 적당한 코드를 넣는다.OnSkip은 요소가 이동할 때마다 호출되는 함수를 지정하여 애니메이션을 중지하는 함수를 호출합니다.OnStop에서 애니메이션이 중지될 때 호출 함수를 지정하여 애니메이션 코드를 사용하여 최적의 위치로 이동할 수 있습니다.구체적으로 다음과 같다.

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60,
        autoadjustheight: false,
        autoadjustwidth: false});
    samp2.setWidth(true);
    samp2.setOnSkip(function(inertia, fchild, containerx){
        if(inertia){
            samp2.stopAnimation();
        }
    });
    samp2.setOnStop(function(disp, just){
        $('#samp2c').animate({left: just}, {duration: 200});
    });
});

만약 inertia가 사실이라면, 관성 동작을 하고 있음을 나타낸다.만약 가짜라면, 교환이나 드래그 동작을 사용하기 때문에 애니메이션을 멈출 필요가 없습니다.동작이 멈췄을 때, jquery의 animate 방법으로 적당한 위치로 이동합니다.파라미터가 주는 just가 설정에 따라 가장 가깝습니다. 정지 위치를 가리키는 용기 좌표입니다.
마지막으로 오른쪽 단추를 사용하고 왼쪽 단추를 누르면 이벤트 처리 프로그램이 이동 함수를 호출합니다.

$(document).ready(function(){
    var samp2 = new Roller({
        id: 'samp2v',
        cntid: 'samp2c',
        freetime: 0,
        displacement: 60,
        autoadjustheight: false,
        autoadjustwidth: false});
    samp2.setWidth(true);
    samp2.setOnSkip(function(inertia, fchild, containerx){
        if(inertia){
            samp2.stopAnimation();
        }
    });
    samp2.setOnStop(function(disp, just){
        $('#samp2c').animate({left: just}, {duration: 200});
    });
    $('#tol2').on('click', function(evt){
        samp2.goLeft(1, 200);
    });
    $('#tor2').on('click', function(evt){
        samp2.goRight(1, 200);
    });
});

goleft, goRight 함수의 첫 번째 매개 변수는 발사할 원소의 수량이고, 두 번째 매개 변수는 이동할 시간이다.
어때요?
복잡한 처리가 필요한 콜첼도 설정을 조금 바꿔 제작할 수 있다.더 쉽게 사용할 수 있는 설정과 다른 이벤트 처리 프로그램의 사용에 관해서는 여기.의 샘플 코드를 참조하십시오.
Android 2.x에서 PC 브라우저로 이동하는 동작의 가벼운 라이브러리입니다.사용하실 수 있다면 다행입니다.