AlloyTouch Endlosschleifen-Auswahl-Plug-in

Schreiben Sie vorne

Wenn es viele scrollende Inhalte gibt, wie zum Beispiel das Einstellen von Sekunden in einem Wecker, gibt es insgesamt 60 Elemente. Es ist für Benutzer sehr schmerzhaft, von 59 ms auf 01 ms zurückzuscrollen, also:
Wenn zu viele Listenelemente vorhanden sind, hoffen wir, dass es zu einer Endlosschleife beim Scrollen kommt. 00ms und 01ms sind nahtlos miteinander verbunden. Wie unten gezeigt:

Online-Demo

http://www.php.cn/

Das Plug-in verwendet

zunächst, um

auf die abhängigen JS- und CSS-Dateien zu verweisen.

<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>

Dann:

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();

• Optionen ist die Menge von allem Artikel . Die oben simulierten 60 Elemente stellen die entsprechenden ms dar.

• selectedIndex ist der

  Index des anfänglich ausgewählten Elements

• Änderung geänderter Rückruf

• Abschließen ist der Rückruf, wenn Sie auf die Schaltfläche „Abschließen“

  klicken

Grundprinzip

Vorher Schauen wir uns das Prinzip an und werfen wir einen Blick auf die Änderungen im

-Attribut im 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;}

Sie können sehen, dass es beim Initialisieren der AlloyTouch-Instanz keine Min- und Max-Parameter gibt, da keine Notwendigkeit dafür besteht Rebound.

Verwenden Sie die Korrektur, um den Effekt von Schlagzyklen zu erzielen. (Hinweis: Obwohl der Wert um einen Zyklus springt, kann die DOM-Rendering-Leistung den Sprung nicht erkennen.)
wobei das Ziel ein
-Objekt ist, ein Literal ist, das das y-Attribut enthält, und scroll das Scrollen des Objekts ist wurde mit den zugehörigen Eigenschaften von transfrom gemischt, sodass seine vertikale Verschiebung direkt über scroll.translateY festgelegt werden kann.

Zusammenfassung

Da die Drehung um 360 den Zyklus nicht automatisch verarbeitet, übergeben wir das Bewegungsobjektliteral {y:xx} selbst und ordnen es dann dem Bildlaufobjekt zu Übersetzen Sie Y durch Korrektur, um die Periodizität zu steuern.

Wir stellen Ihnen im Folgenden auch Folgendes vor:

• AlloyTouch-Praxis zur Auswahl mehrerer Kaskaden

• AlloyTouch ermöglicht die Auswahl von 3D-Effekten

Das obige ist der detaillierte Inhalt vonAlloyTouch Endlosschleifen-Auswahl-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!