Question

将旋转应用于图像元素，并希望使此跨浏览器兼容。这将在几个要素上多次采取行动。

我知道我可以做到这一点;

  elem.style.WebkitTransform = "rotate("+de+"deg)"; 
  elem.style.MozTransform = "rotate("+de+"deg)";
  elem.style.msTransform = "rotate("+des+"deg)";
  elem.style.OTransform = "rotate("+de+"deg)";
  elem.style.transform = "rotate("+de+"deg)";

这看起来很乱，我想知道如果浏览器识别出多个转换会发生什么？

我可以使用if else序列或使用浏览器嗅探来切换这些，但是如果可能的话我会避免嗅探，使用任何一种方法都会使它更加混乱。所以我从这里开始使用代码 Detect Transform 这将返回我分配给变量mytransform的第一个识别的变换{transform WebkitTransform MozTransform OTransform msTransform}的名称。

然后我写了一组函数

function activetransform(elem,de) {
  elem.style.transform = "rotate("+de+"deg)";
}
.
.
.
function activemsTransform(elem,de) {
  elem.style.msTransform = "rotate("+de+"deg)";
}

这些功能中只有一个用于特定浏览器。它由旋转功能

调用

function rotate(timing){
  // selects elem
  // calculates angle
  window[mytransform](elem,de);

所以只调用一个转换，我不需要重复浏览器检测，使用if或switch但是我需要一个数组查找和第二个函数调用。

如果我可以用;替换所有转换，那将是多么伟大的事情。

elem.style.mytransform = "rotate("+de+"deg)";

变量mytransform =浏览器特定变换的名称。

JavaScript动态选择样式转换

0 个答案: