jquery modifier la transformation

JQuery est une solution courante lorsque nous devons modifier le style des éléments de la page. Quant à la modification de l'attribut transform, elle est quelque peu différente des autres attributs de style et nécessite un traitement spécial. Cet article explique comment utiliser jQuery pour modifier l'attribut transform.

Tout d'abord, nous devons comprendre l'attribut transform. L'attribut transform est utilisé pour effectuer une rotation, une mise à l'échelle, une traduction et d'autres transformations sur les éléments. Les fonctions de transformation courantes incluent la translation, la rotation, la mise à l'échelle, etc. Vous pouvez utiliser des méthodes de combinaison pour obtenir des effets de transformation plus complexes.

Nous pouvons définir l'attribut transform de l'élément via CSS, par exemple, pour faire pivoter un élément de 45 degrés :

div {
  transform: rotate(45deg);
}

De cette façon, l'élément peut pivoter de 45 degrés . Bien entendu, nous pouvons également utiliser jQuery pour modifier cette propriété. Tout d'abord, nous devons savoir comment utiliser jQuery pour obtenir la valeur de l'attribut de transformation de l'élément :

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

Ici, nous obtiendrons une chaîne représentant la valeur de l'attribut de transformation de l'élément. Par exemple, lorsque nous utilisons le code CSS précédent pour faire pivoter un élément div de 45 degrés, l'appel du code ci-dessus obtiendra le résultat suivant :

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

Cette chaîne représente une matrice utilisée pour décrire l'effet de transformation du élément . Mais il nous est difficile de comprendre l’effet de transformation des éléments directement à travers cette matrice, nous avons donc besoin d’une manière plus conviviale de l’exprimer. Ci-dessous, nous verrons comment transformer une matrice de manière plus lisible.

Tout d'abord, nous devons décomposer la matrice en une seule fonction de transformation pour décrire l'effet de transformation des éléments. Nous pouvons utiliser une bibliothèque JavaScript [1] pour implémenter cette fonction :

// 分解矩阵成变换函数
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}

Cette fonction décompose la matrice en un ensemble de fonctions de transformation, plus facile à comprendre. Par exemple, TranslateX et TranslateY représentent la distance de translation de l'élément, tandis que rotate représente l'angle de rotation de l'élément.

En même temps, nous pouvons également combiner ces fonctions de transformation pour générer une nouvelle valeur d'attribut de transformation. Ci-dessous, nous expliquerons comment utiliser jQuery pour réaliser cette fonction.

Tout d'abord, afin de modifier facilement l'attribut transform, on peut l'encapsuler dans un plug-in jQuery :

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

La fonction de ce plug-in est de combiner les objets de fonction de transformation entrants en un seul. La nouvelle valeur de l'attribut de transformation est définie sur l'élément actuel. Par exemple, pour traduire un élément de 20 pixels vers la droite, vous pouvez l'appeler ainsi :

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

Cela traduira l'élément de 20 pixels. De même, nous pouvons également obtenir d'autres effets sur les éléments en modifiant d'autres fonctions de transformation.

De plus, nous pouvons également utiliser ce plug-in pour obtenir la valeur de l'attribut de transformation de l'élément, par exemple :

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

De cette façon, nous pouvons obtenir une transformation objet fonction qui contient toutes les transformations de l'élément Effect.

En résumé, en utilisant l'attribut transform de jQuery et CSS, nous pouvons obtenir des effets de transformation tels que la rotation, la mise à l'échelle et la traduction des éléments de la page. Lorsque vous devez modifier l'attribut transform, vous pouvez utiliser les techniques ci-dessus pour réaliser des opérations plus pratiques et plus flexibles en encapsulant des plug-ins.

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!