Laissez l'image pivoter sous n'importe quel angle et introduisez l'utilisation du plug-in JQuery-js tutoriel-php.cn

Laissez l'image pivoter sous n'importe quel angle et introduisez l'utilisation du plug-in JQuery

高洛峰

Libérer： 2017-02-04 09:18:15

original

1846 Les gens l'ont consulté

Introduisez le fichier jquery.rotate.js ci-dessous, puis utilisez $("selector").rotate(angle); pour faire pivoter selon n'importe quel angle,
Par exemple, $("#rotate-image"). rotate(45 );Mettez cette phrase dans $(document).ready(function(){ });
consiste à faire pivoter l'image avec l'ID rotate-image de 45 degrés.

Cependant, il semble qu'il ne soit toujours pas affiché dans Chrome.
Hélas, après deux heures de recherche, j'ai découvert que Chrome est trop compliqué pour obtenir la longueur et la largeur de l'image.
La solution est de mettre $("#rotate-image").rotate(45); dans
$(window).load(function(){ }); non chargé lorsque l'instruction dans $(document).ready(function(){ }); est exécutée, ce qui est une arnaque.

De plus, il est plus pratique de faire pivoter de 90 degrés vers la droite et de 90 degrés vers la gauche en appelant respectivement $("selector").rotateRight() et $("selector").rotateLeft() .

jquery.rotate.js :

jQuery.fn.rotate = function(angle,whence) { 
var p = this.get(0); 
// we store the angle inside the image tag for persistence 
if (!whence) { 
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360; 
} else { 
p.angle = angle; 
} 
if (p.angle >= 0) { 
var rotation = Math.PI * p.angle / 180; 
} else { 
var rotation = Math.PI * (360+p.angle) / 180; 
} 
var costheta = Math.round(Math.cos(rotation) * 1000) / 1000; 
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000; 
//alert(costheta+","+sintheta); 
if (document.all && !window.opera) { 
var canvas = document.createElement(&#39;img&#39;); 
canvas.src = p.src; 
canvas.height = p.height; 
canvas.width = p.width; 
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod=&#39;auto expand&#39;)"; 
} else { 
var canvas = document.createElement(&#39;canvas&#39;); 
if (!p.oImage) { 
canvas.oImage = new Image(); 
canvas.oImage.src = p.src; 
} else { 
canvas.oImage = p.oImage; 
} 
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); 
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width); 
var context = canvas.getContext(&#39;2d&#39;); 
context.save(); 
if (rotation <= Math.PI/2) { 
context.translate(sintheta*canvas.oImage.height,0); 
} else if (rotation <= Math.PI) { 
context.translate(canvas.width,-costheta*canvas.oImage.height); 
} else if (rotation <= 1.5*Math.PI) { 
context.translate(-costheta*canvas.oImage.width,canvas.height); 
} else { 
context.translate(0,-sintheta*canvas.oImage.width); 
} 
context.rotate(rotation); 
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); 
context.restore(); 
} 
canvas.id = p.id; 
canvas.angle = p.angle; 
p.parentNode.replaceChild(canvas, p); 
} 
jQuery.fn.rotateRight = function(angle) { 
this.rotate(angle==undefined?90:angle); 
} 
jQuery.fn.rotateLeft = function(angle) { 
this.rotate(angle==undefined?-90:-angle); 
}

Copier après la connexion

Pour plus d'articles connexes sur la façon de faire pivoter des images sous n'importe quel angle et sur l'utilisation du plug-in JQuery, veuillez faire attention au chinois PHP. site web!