Heim > Web-Frontend > js-Tutorial > Hauptteil

Lassen Sie das Bild in einen beliebigen Winkel drehen und führen Sie die Verwendung des JQuery-Plug-Ins ein

高洛峰
Freigeben: 2017-02-04 09:18:15
Original
1805 Leute haben es durchsucht

Fügen Sie die Datei jquery.rotate.js unten ein und verwenden Sie dann $("selector").rotate(angle);, um in einen beliebigen Winkel zu drehen,
Zum Beispiel $("#rotate-image"). rotation(45 );Fügen Sie diesen Satz in $(document).ready(function(){ });
ein, um das Bild mit der ID rotation-image um 45 Grad zu drehen.

Es scheint jedoch, dass es in Chrome immer nicht angezeigt wird.
Leider habe ich nach zwei Stunden Suche herausgefunden, dass Chrome zu schwierig ist, um die Länge und Breite des Bildes zu ermitteln.
Die Lösung besteht darin, $("#rotate-image").rotate(45); in
$(window).load(function(){ }); einzufügen, da das Bild in Chrome ist nicht geladen, wenn die Anweisung in $(document).ready(function(){ }); ausgeführt wird, was ein Betrug ist.

Außerdem ist es bequemer, um 90 Grad nach rechts und 90 Grad nach links zu drehen, indem man jeweils $("selector").rotateRight() und $("selector").rotateLeft() aufruft .

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('img'); 
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='auto expand')"; 
} else { 
var canvas = document.createElement('canvas'); 
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('2d'); 
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); 
}
Nach dem Login kopieren

Weitere verwandte Artikel zum Drehen von Bildern in einen beliebigen Winkel und zur Verwendung des JQuery-Plug-Ins finden Sie im PHP-Chinesisch Webseite!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage