JQuery-Änderungstransformation

JQuery ist eine gängige Lösung, wenn wir den Stil von Seitenelementen ändern müssen. Die Änderung des Transformationsattributs unterscheidet sich etwas von anderen Stilattributen und erfordert eine spezielle Verarbeitung. In diesem Artikel wird erläutert, wie Sie mit jQuery das Transformationsattribut ändern.

Zuerst müssen wir das Transformationsattribut verstehen. Das Transformationsattribut wird zum Durchführen von Drehungen, Skalierungen, Verschiebungen und anderen Transformationen an Elementen verwendet. Zu den gängigen Transformationsfunktionen gehören Übersetzen, Drehen, Skalieren usw. Sie können Kombinationsmethoden verwenden, um komplexere Transformationseffekte zu erzielen.

Wir können das Transformationsattribut des Elements über CSS definieren, um beispielsweise ein Element um 45 Grad zu drehen:

div {
  transform: rotate(45deg);
}

Auf diese Weise kann das Element um 45 Grad gedreht werden . Natürlich können wir diese Eigenschaft auch mit jQuery ändern. Zuerst müssen wir wissen, wie man jQuery verwendet, um den Transformationsattributwert des Elements abzurufen:

// 获取transform属性值
var transformValue = $('div').css('transform');

Hier erhalten wir eine Zeichenfolge, die den Transformationsattributwert des Elements darstellt. Wenn wir beispielsweise den vorherigen CSS-Code verwenden, um ein div-Element um 45 Grad zu drehen, erhält der Aufruf des obigen Codes das folgende Ergebnis:

matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0)

Diese Zeichenfolge stellt eine Matrix dar, die zur Beschreibung des Transformationseffekts des verwendet wird Element. Da es für uns jedoch schwierig ist, den Transformationseffekt von Elementen direkt über diese Matrix zu verstehen, benötigen wir eine benutzerfreundlichere Möglichkeit, ihn auszudrücken. Im Folgenden erfahren Sie, wie Sie eine Matrix in eine besser lesbare Form umwandeln.

Zuerst müssen wir die Matrix in eine einzelne Transformationsfunktion zerlegen, um den Transformationseffekt der Elemente zu beschreiben. Wir können eine JavaScript-Bibliothek [1] verwenden, um diese Funktion zu implementieren:

// 分解矩阵成变换函数
function decomposeMatrix(matrix) {
  // 用来存储变换函数
  var transform = {};
  // 计算平移和旋转
  var a = matrix[0], b = matrix[1], c = matrix[2], d = matrix[3];
  var scaleX = Math.sqrt(a*a + b*b);
  var scaleY = Math.sqrt(c*c + d*d);
  transform.translateX = a > 0 ? matrix[4] : matrix[4] + scaleX;
  transform.translateY = d > 0 ? matrix[5] : matrix[5] + scaleY;
  transform.rotate = Math.atan2(b, a) * (180/Math.PI);
  // 计算缩放
  transform.scaleX = scaleX;
  transform.scaleY = scaleY;
  // 返回变换函数对象
  return transform;
}

// 示例：
var matrix = [0.7071, 0.7071, -0.7071, 0.7071, 0, 0];
var transform = decomposeMatrix(matrix);
console.log(transform);
// 输出：{translateX: 0, translateY: 0, rotate: 45, scaleX: 1, scaleY: 1}

Diese Funktion zerlegt die Matrix in einen Satz von Transformationsfunktionen, was leichter zu verstehen ist. Beispielsweise stellen TranslateX und TranslateY den Translationsabstand des Elements dar, während Rotate den Rotationswinkel des Elements darstellt.

Gleichzeitig können wir diese Transformationsfunktionen auch kombinieren, um einen neuen Transformationsattributwert zu generieren. Im Folgenden stellen wir vor, wie Sie jQuery verwenden, um diese Funktion zu erreichen.

Um das Transformationsattribut einfach zu ändern, können wir es zunächst in ein jQuery-Plug-In kapseln:

// 封装transform函数
$.fn.transform = function(transforms) {
  var props = '';
  $.each(transforms, function(key, value) {
    props += key + '(' + value + ') ';
  });
  return this.css('transform', props.trim());
};

Die Funktion dieses Plug-Ins besteht darin, Kombinieren Sie die eingehenden Transformationsfunktionsobjekte zu einem. Der neue Transformationsattributwert wird auf das aktuelle Element gesetzt. Um beispielsweise ein Element um 20 Pixel nach rechts zu verschieben, können Sie es wie folgt aufrufen:

$('div').transform({translateX: '20px'});

Dadurch wird das Element um 20 Pixel verschoben. Ebenso können wir auch andere Effekte auf Elemente erzielen, indem wir andere Transformationsfunktionen modifizieren.

Darüber hinaus können wir dieses Plug-in auch verwenden, um den Transformationsattributwert des Elements abzurufen, zum Beispiel:

var transforms = $('div').transform();
console.log(transforms);
// 输出：{translateX: 20, translateY: 0, rotate: 45, scaleX: 1, scaleY: 1}

Auf diese Weise können wir eine Transformation erhalten Funktionsobjekt, das alle Transformationen des Elements Effect enthält.

Zusammenfassend können wir durch die Verwendung des Transformationsattributs von jQuery und CSS Transformationseffekte wie Drehung, Skalierung und Übersetzung von Seitenelementen erzielen. Wenn Sie das Transformationsattribut ändern müssen, können Sie die oben genannten Techniken verwenden, um durch Einkapseln von Plug-Ins bequemere und flexiblere Vorgänge zu erzielen.

Das obige ist der detaillierte Inhalt vonJQuery-Änderungstransformation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!