AlloyTouch 무한 루프 선택 플러그인

앞에 쓰기

알람시계의 초를 맞추는 등 스크롤 내용이 많은 경우 총 60개의 항목이 있습니다. 59ms에서 01ms로 뒤로 스크롤하는 것은 사용자에게 매우 고통스럽습니다.
목록 항목이 너무 많으면 무한 루프 스크롤이 가능하기를 바랍니다. 00ms와 01ms는 원활하게 연결됩니다. 아래와 같습니다:

온라인 데모

http://www.php.cn/

플러그인은 먼저

을 사용하여 종속 JS 및 CSS 파일을 참조합니다.

<link rel="stylesheet" href="select.css" /><script src="../../transformjs/transform.js"></script><script src="../../alloy_touch.js"></script><script src="alloy_touch.select.infinite.js"></script>

Then:

var i = 0, options = [];for (; i < 60; i++) {
    options.push({ value: i, text: i < 10 ? "0" + i+" ms" : i + " ms" });}var iselect = new AlloyTouch.Select({
    options: options,
    selectedIndex: 11,
    change: function (item, index) {

    },
    complete: function (item, index) {
        document.body.insertAdjacentHTML("beforeEnd", "<br/>选了第" + index + "项<br/>value:" + item.value + "<br/>text:" + item.text);
    }})iselect.show();

• options는 모든 항목의 집합입니다. 위의 시뮬레이션된 60개 항목은 해당 ms를 나타냅니다

• selectedIndex는 초기 선택된 항목의 인덱스

• 변경 사항입니다. 변경된 콜백

• complete는 완료버튼

핵심원리

를 클릭하는 콜백입니다. 원리를 살펴보면서 DOM의 속성 의 변경 사항을 살펴보겠습니다.

new AlloyTouch({
    touch: container,
    target: { y: -1 * preSelectedIndex * step },
    property: "y",
    vertical: true,
    step: step,
    change: function (value) {
        correction(value);
    },
    touchStart: function (evt, value) { },
    touchMove: function (evt, value) { },
    touchEnd: function (evt, value) { },
    tap: function (evt, value) { },
    pressMove: function (evt, value) { },
    animationEnd: function (value) { }})function correction(value) {
    value %= scrollerHeight;
    if (Math.abs(value) > scrollerHeight-90) {
        if (value > 0) {
            value -= scrollerHeight;
        } else {
            value += scrollerHeight;
        }
    }
    scroll.translateY = value - scrollerHeight;}

AlloyTouch 인스턴스를 초기화할 때 리바운드가 필요하지 않기 때문에 최소 및 최대 매개변수가 없는 것을 확인할 수 있습니다.
교정을 사용하여 박동 주기 효과를 만들어 보세요. (참고: 값은 한 사이클씩 점프하지만 DOM 렌더링 성능은 점프를 볼 수 없습니다.)
여기서 대상은 y 속성을 포함하는 객체 리터럴이고
scroll은 객체를 스크롤하는 것입니다. transfrom의 관련 속성과 혼합되었으므로 수직 변위는 scroll.translateY를 통해 직접 설정할 수 있습니다.

요약

360도 회전은 자동으로 주기를 처리하지 않기 때문에 모션 개체 리터럴 {y:xx}를 직접 전달한 다음 스크롤 개체의 수정을 통해 번역하여 주기성을 제어합니다.
후속 작업도 안내해 드립니다:

• AlloyTouch의 다중 계단식 선택 연습

• AlloyTouch의 3D 효과 선택 연습

위 내용은 AlloyTouch 무한 루프 선택 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!