Maison > interface Web > js tutoriel > le corps du texte

Plug-in de sélection de boucle infinie AlloyTouch

PHPz
Libérer: 2017-03-12 16:01:06
original
1261 Les gens l'ont consulté

Écrivez devant

Lorsqu'il y a beaucoup de contenu défilant, comme le réglage des secondes dans un réveil, il y a 60 éléments au total. Il est très pénible pour les utilisateurs de revenir en arrière de 59 ms à 01 ms, donc :
Lorsqu'il y a trop d'éléments de liste, nous espérons avoir un défilement boucle infini. 00 ms et 01 ms sont parfaitement liés. Comme indiqué ci-dessous :

Plug-in de sélection de boucle infinie AlloyTouch

Démo en ligne

Plug-in de sélection de boucle infinie AlloyTouch

http://www.php.cn/

Le plug-in utilise

d'abord pour référencer les fichiers JS et CSS dépendants .


<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>
Copier après la connexion

Alors :


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();
Copier après la connexion
  • les options sont l'ensemble de toutes articles . Les 60 éléments simulés ci-dessus représentent le ms

  • selectedIndex correspondant est le index de l'élément sélectionné initial

  • le changement est modifié Le rappel

  • complete est le rappel en cliquant sur le bouton d'achèvement

Principe de base

Avant en regardant le principe, regardons les changements dans l'attribut dans le dom.

Plug-in de sélection de boucle infinie AlloyTouch


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;}
Copier après la connexion

Vous pouvez voir qu'il n'y a pas de paramètres min et max lors de l'initialisation de l'instance AlloyTouch, car il n'est pas nécessaire de rebond.
Utilisez la correction pour produire l'effet de cycles de battement. (Remarque : bien que la valeur saute d'un cycle, les performances de rendu dom ne peuvent pas voir le saut)
où la cible est un objet littéral contenant l'attribut y, et
le défilement fait défiler l'objet a été mélangé avec les propriétés associées de transfrom, de sorte que son déplacement vertical peut être défini directement via scroll.translateY.

Résumé

Étant donné que la rotation à 360° ne gère pas automatiquement le cycle, nous passons nous-mêmes le littéral de l'objet de mouvement {y:xx}, puis le mappons à celui de l'objet de défilement. se traduit par une correction pour contrôler la périodicité.
Nous vous apporterons également le suivi :

  • Pratique de sélection en cascade multiple d'AlloyTouch

  • AlloyTouch réalise la pratique de sélection d'effets 3D

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal