Parlez de la compréhension préliminaire des compétences d'impress.js

Parlez de la compréhension préliminaire des compétences d'impress.js_javascript

WBOY

Libérer： 2016-05-16 15:40:06

original

1467 Les gens l'ont consulté

1. Comprendre impression.js

　impress.js est un framework de couche de présentation (outil de présentation) utilisé par les développeurs utilisant les langages CSS3 et JavaScript.

Désormais, les développeurs ordinaires peuvent utiliser Ensure.js pour développer un outil de présentation avec des effets similaires, mais avec de meilleures performances que Prezi basé sur FLASH. Ses fonctions incluent une rotation et une mise à l'échelle illimitées du canevas, le placement de texte de n'importe quelle taille sous n'importe quel angle, la prise en charge des effets 3D CSS3, etc. Dans le même temps, les présentations de diapositives sous forme de PowerPoint traditionnel sont également prises en charge.

Actuellement impressionner.js est développé sur la base de navigateurs webkit (Chrome, Safari), mais il peut également fonctionner normalement sur d'autres navigateurs basés sur des moteurs non-webkit mais prenant en charge CSS3 3D.

2. Utilisez Ensure.js

Présentation d'Impress.js :

Copier le code Le code est le suivant :

Vous pouvez maintenant voir à quel point il est facile de créer un nouveau diaporama. Chaque diapositive est un élément

(dans un wrapper) dont le nom de classe est 'step'.

Copier le code Le code est le suivant :

Ma première diapositive

Même si vous créez un diaporama simple, c'est amusant lorsque vous commencez à ajouter des attributs de données à votre diaporama. Les attributs de données représentent les propriétés de votre diapositive lorsqu'il ne s'agit pas de la diapositive active. Vous pouvez utiliser les attributs de données suivants :

data-x = coordonnée x de la diapositive

data-y = coordonnée y de la diapositive

data-scale = Zoom en spécifiant une valeur. Une échelle de données de 5 agrandira votre diapositive de 5 fois la taille d'origine
.

data-rotate = Faites pivoter vos diapositives d'un degré numérique

data-rotate-x = Pour la 3D, ce nombre correspond à la rotation par rapport à l'axe des x. (Penchez-vous en avant/penchez-vous en arrière)

data-rotate-y = Pour la 3D, ce nombre correspond à la rotation par rapport à l'axe y. (Balancez à gauche/à droite)

data-rotate-z = Pour la 3D, ce nombre correspond à la rotation par rapport à l'axe z.

Répertoire des instances :

Le contenu ci-dessus est ma compréhension préliminaire d'impress.js. Il peut être superficiel, je l'étudierai en profondeur plus tard.