communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Trois façons d'obtenir une rotation d'image avec les compétences js_javascript

Trois façons d'obtenir une rotation d'image avec les compétences js_javascript

WBOY
Libérer： 2016-05-16 16:53:04
original
2206 Les gens l'ont consulté

1 使用jQueryRotate.js实现

示例代码：

复制代码 代码如下:











测试结果：chrome下效果正常，旋转后img对象仍为img对象；ie8下效果正常，但旋转后img对象变为下面对象，由于对象变化，若旋转后仍按Il s'agit d'un img, d'un js, d'un image, d'un class.作，则可用此方法。若进行其它操作，如放大、缩小图像，则此
复制代码 代码如下 :

2 使用Microsoft提供的Matrix对象

示例代码：
复制代码 代码如下 :










测试结果：chrome下效果正常，但旋转后img对象变为canvas对象；ie8下效果正常，旋转后img对象Il s'agit d'un img.Matrix() est également utilisé.需较多计算。

3 使用Microsoft提供的BasicImage对象

示例代码:

复制代码 代码如下 :










Résultat : la rotation ne peut pas être effectuée sous Chrome ; l'effet est normal sous ie8, et l'objet img est toujours un objet img après la rotation. BasicImage() n'a qu'un seul paramètre.

En regardant les codes de ces trois méthodes, vous constaterez qu'il s'agit essentiellement d'une solution : en utilisant l'objet canvas sous chrome, et en utilisant VML ou Matrix() ou BasicImage() sous ie8. J'ai récemment rénové un composant : il s'agit de faire pivoter et d'agrandir les images Puisque jQueryRotate.js va générer un nouvel objet sous IE8, un traitement particulier est nécessaire lors de la sélection d'une image avant de l'agrandir. Finalement, il a été décidé de gérer Chrome et ie8 séparément. JQueryRotate a été utilisé pour l'implémenter sous Chrome, et BasicImage() a été utilisé sous ie8 pour garantir la simplicité et la lisibilité du code.
Étiquettes associées：
图片旋转
source：php.cn
Article précédent：jQuery faisant glisser un div, déplacer un div et principes de mise en œuvre de la couche contextuelle et exemples_jquery Article suivant：jQuery traversant l'application de table example_jquery
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
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
J'ai des problèmes avec une grille CSS dont la hauteur n'est pas celle à laquelle je m'attendais, quelles erreurs pourrais-je commettre ? J'apprends actuellement les grilles CSS et on m'a demandé de créer cette carte en la décom...
Depuis 2024-04-06 12:52:14
0
1
339
Problèmes de connexion entre le terminal de reconnaissance faciale iVMS-4200 et la base Le terminal de reconnaissance faciale iVMS-4200 affiche une erreur lors de la connexion à ...
Depuis 2024-04-06 12:20:33
0
1
347
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Afficher un élément après un bloc de nouvelle ligne J'ai actuellement ceci : je veux mettre l'icône div à la fin du texte, mais comme c'est un...
Depuis 2024-04-04 21:45:21
0
1
271
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal