1. Accueil
  2. Question et réponse
  3. Faire pivoter l'image dans le sens des aiguilles d'une montre ou dans le sens contraire des aiguilles d'une montre en utilisant javascript

Faire pivoter l'image dans le sens des aiguilles d'une montre ou dans le sens contraire des aiguilles d'une montre en utilisant javascript

2009-06-09 5 views
14

HI, Y at-il un moyen de faire pivoter une image dans un sens horaire ou antihoraire?Faire pivoter l'image dans le sens des aiguilles d'une montre ou dans le sens contraire des aiguilles d'une montre en utilisant javascript

I ont une principale div de largeur fixe [trop-plein de caché] avec des images chargées à partir de la base de données. Il y a une barre de défilement pour montrer les images à l'intérieur de la div. Lorsque l'image est cliquée, je dois montrer l'animation en rotation dans le sens des aiguilles d'une montre ou dans le sens contraire des aiguilles d'une montre.

Je l'ai fait en utilisant le filtre Matrix. Je voudrais savoir s'il est possible d'être fait dans IE seulement sans utiliser de filtres.

Source

2009-06-09 rahul

Répondre

3

La seule façon que je peux penser pour faire tourner des images sur le côté client dans Internet Explorer utilise les filtres. Pour les versions un peu récentes, les autres navigateurs, vous pouvez utiliser le <canvas> control.

Votre alternative consiste à utiliser un script côté serveur pour faire pivoter l'image. Ensuite, vous pouvez envoyer les informations sur la façon de le faire tourner avec JavaScript (à savoir générer un chemin à l'image telle que /rotate?image=img.jpg & quantité = 90)

Source

2009-06-09 07:40:15 Blixt

+0

Le problème avec les filtres est que, après application de la matrice filtre la clarté de l'image est réduite dans une certaine mesure. Y a-t-il un moyen d'éviter cela? – rahul

2

CSS3 supports rotation, mais it isn't widely supported. Comme vous avez demandé une solution JavaScript, here's one, mais je ne pense pas que vous pouvez obtenir des images fluides.

Source

2009-06-09 07:45:35

+5

Juste un avertissement concernant la solution JavaScript: même pour une image aussi petite que 100x100, il générera 10 000 éléments div, chacun avec l'image comme arrière-plan. C'est sûr de faire tomber certains navigateurs lorsque vous le faites à des images plus grandes. – Blixt

12

Si vous utilisez jQuery, jQueryRotate est un petit (moins de 3Kb minified + gzip) plug-in qui tourne des images:

http://jqueryrotate.com/

Source

2010-04-16 14:06:45 Wilq32

+0

Note: apparemment, cela a été déplacé vers http://code.google.com/p/jqueryrotate/ –

+0

Lien mis à jour vers la version la plus récente – Wilq32

1

Il y a une autre façon de faire pivoter les images sans aucun filtre/html5 .. c'est méchant et inutile dans le monde réel, mais possible.

Vous pouvez stocker votre image sous forme de tableau de pixels, pour le javascript. Fonction d'écriture pour effectuer une rotation avec elle et l'encoder en base64i, bmp pourrait être facile et remplacer image.src par celle-ci.

Il y aura une certaine limitation sur les filesize et le soutien dans le vieux navigateur et bien sûr performance terrible ..

Source

2013-01-07 04:45:05 user1954035

Questions connexes

 Questions connexes