jquery mengubah suai transformasi

jQuery ialah penyelesaian biasa apabila kita perlu mengubah suai gaya elemen halaman. Bagi pengubahsuaian atribut transformasi, ia agak berbeza daripada atribut gaya lain dan memerlukan pemprosesan khas. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengubah suai atribut transform.

Pertama, kita perlu memahami atribut transformasi. Atribut transformasi digunakan untuk melakukan putaran, penskalaan, terjemahan dan transformasi lain pada elemen Fungsi transformasi biasa termasuk menterjemah, putar, skala, dll. Anda boleh menggunakan kaedah gabungan untuk mencapai kesan transformasi yang lebih kompleks.

Kita boleh mentakrifkan atribut transformasi elemen melalui CSS, contohnya, untuk memutarkan elemen 45 darjah:

div {
  transform: rotate(45deg);
}

Dengan cara ini, elemen boleh diputar 45 darjah. Sudah tentu, kita juga boleh menggunakan jQuery untuk mengubah suai sifat ini. Mula-mula, kita perlu tahu cara menggunakan jQuery untuk mendapatkan nilai atribut transform bagi elemen:

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

Di sini kita akan mendapat rentetan yang mewakili nilai atribut transformasi elemen. Contohnya, apabila kita menggunakan kod CSS sebelumnya untuk memutarkan elemen div 45 darjah, memanggil kod di atas akan mendapat hasil berikut:

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

Rentetan ini mewakili matriks yang digunakan untuk menerangkan kesan transformasi elemen. Tetapi sukar untuk kita memahami kesan transformasi unsur secara langsung melalui matriks ini, jadi kita memerlukan cara yang lebih mesra untuk menyatakannya. Di bawah, kami akan membincangkan cara mengubah matriks kepada cara yang lebih mudah dibaca.

Pertama, kita perlu menguraikan matriks menjadi satu fungsi penjelmaan untuk menerangkan kesan penjelmaan unsur. Kita boleh menggunakan perpustakaan JavaScript [1] untuk melaksanakan fungsi ini:

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

Fungsi ini menguraikan matriks kepada satu set fungsi transformasi, yang lebih mudah difahami. Contohnya, translateX dan translateY mewakili jarak terjemahan unsur, manakala putaran mewakili sudut putaran elemen.

Pada masa yang sama, kami juga boleh menggabungkan fungsi transformasi ini untuk menjana nilai atribut transformasi baharu. Di bawah, kami akan memperkenalkan cara menggunakan jQuery untuk mencapai fungsi ini.

Pertama sekali, untuk mengubah suai atribut transformasi dengan mudah, kita boleh merangkumnya ke dalam pemalam jQuery:

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

Fungsi pemalam ini adalah untuk menggabungkan transformasi masuk fungsi objek menjadi nilai atribut transformasi baharu dan ditetapkan kepada elemen semasa. Contohnya, untuk menterjemah elemen 20 piksel ke kanan, anda boleh memanggil:

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

Ini akan menterjemahkan elemen 20 piksel. Begitu juga, kita juga boleh mencapai kesan lain pada elemen dengan mengubah suai fungsi transformasi lain.

Selain itu, kita juga boleh menggunakan pemalam ini untuk mendapatkan nilai atribut transformasi elemen, contohnya:

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

Dengan cara ini, kita boleh mendapatkan objek fungsi transformasi yang mengandungi semua kesan transformasi unsur.

Ringkasnya, dengan menggunakan atribut transformasi jQuery dan CSS, kita boleh mencapai kesan transformasi seperti putaran, penskalaan dan terjemahan elemen halaman. Apabila anda perlu mengubah suai atribut transformasi, anda boleh menggunakan teknik di atas untuk mencapai operasi yang lebih mudah dan fleksibel dengan merangkum pemalam.

Atas ialah kandungan terperinci jquery mengubah suai transformasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!