Comment faire pivoter, zoomer, dézoomer et faire glisser des images dans un div

Yaoyao, Cheke Nao, j'en ai marre de coder seul, et j'en ai marre d'écrire ces bugs en tas. L'air d'automne est frais et l'air est sec. Tu dois boire plus d'eau. J'y retournerai après cette semaine, tu peux venir discuter avec moi autant que tu veux~~~

Nouvel An Nouvel An, je n'ai pas posté de blog depuis longtemps. Maintenant que la fête nationale approche, j'ai entendu dire qu'après la fête nationale, je dois attendre les chinois. Nouvel An, mais j'ai l'impression de célébrer le Nouvel An et je me sens triste. Je publierai un message pour exprimer ma gratitude à Xiao Baiju Pour me réconforter...

. Dans un scénario en cours de développement, une certaine fonction de l'application Web recevra des images téléchargées par divers utilisateurs et il existe une fonction de visualisation d'images en arrière-plan. Dans le processus de production réel, les images téléchargées par les utilisateurs sont inversées ou inversées. les photos sont floues car elles ont été prises de loin.

1. Résoudre le problème de angle d'image

Le principe est très simple, changez la classe de l'objet élément HTML (image). Le code CSS suivant :

.rot1 {
    transform:rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot2 {
    transform:rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot3 {
    transform:rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Ajoutez ensuite un simple code JavaScript - changez dynamiquement le nom de la classe selon qu'elle est tournée à gauche ou bien. C'est tout. Encore une fois, je me rappelle que le navigateur IE8 utilise directement -ms-filter pour n'avoir aucun effet. filter
La méthode CSS3+filter est utilisée ici, donc la version inférieure de Firefox n'a aucun effet sur la version actuelle du navigateur Opera. Mais c’est définitivement applicable à plus de 90 % des internautes.

2. Zoomer ou dézoomer sur l'image

signifie ajuster la largeur et la hauteur de l'image. Le code principal suivant

  //放大缩小图片 function imgToSize(size) {
    var img = $("#rotImg");
    var oWidth = img.width();
    //取得图片的实际宽度 var oHeight = img.height();
    //取得图片的实际高度 img.width(oWidth + size);
    img.height(oHeight + size / oWidth * oHeight);
}

3. Faites glisser l'image dans la zone

Lorsque l'image est agrandie au-delà du conteneur parent, elle prend en charge le déplacement de l'image dans le conteneur. Liez mousemove dans des conditions de souris enfoncées pour calculer la taille de la zone de déplacement :

 $(document).bind('mousemove.imgview', function (event) {
    if ($img.data('mousedown')) {
    var dx = event.pageX - settings['pageX'];
    var dy = event.pageY - settings['pageY'];
    if ((dx == 0) && (dy == 0)) {
    return false;
}
var newX = parseInt($img.css('left')) + dx;
    if (newX > 0) newX = 0;
    if (newX < settings[&#39;width&#39;] - $img.width()) newX = settings[&#39;width&#39;] - $img.width() + 1;
    var newY = parseInt($img.css(&#39;top&#39;)) + dy;
    if (newY > 0) newY = 0;
    if (newY < settings[&#39;height&#39;] - $img.height()) newY = settings[&#39;height&#39;] - $img.height() + 1;
    if (settings[&#39;width&#39;] >= $img.width()) {
    newX = settings[&#39;width&#39;] / 2 - $img.width() / 2;
}
if (settings[&#39;height&#39;] >= $img.height()) {
    newY = settings[&#39;height&#39;] / 2 - $img.height() / 2;
}
$img.css(&#39;left&#39;, newX + &#39;px&#39;);
    $img.css(&#39;top&#39;, newY + &#39;px&#39;);
    settings[&#39;pageX&#39;] = event.pageX;
    settings[&#39;pageY&#39;] = event.pageY;
    $img.data(&#39;cannot_minimize&#39;, true);
}
return false;
}
);

4. Le code complet d'implémentation de la fonction est le suivant Pour l'exécuter, veuillez télécharger la démo en bas

5. L'effet final est le suivant :

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!