javascript - 在 IE10 中，图像在鼠标移动时旋转

Question

我通过 Stackoverflow 找到了这段很棒的代码，可以在鼠标移动时旋转图片。

var img = $('.image');
if(img.length > 0){
var offset = img.offset();
function mouse(evt){
    var center_x = (offset.left) + (img.width()/2);
    var center_y = (offset.top) + (img.height()/2);
    var mouse_x = evt.pageX; var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90; 
    img.css('-moz-transform', 'rotate('+degree+'deg)');
    img.css('-webkit-transform', 'rotate('+degree+'deg)');
    img.css('-o-transform', 'rotate('+degree+'deg)');
    img.css('-ms-transform', 'rotate('+degree+'deg)');
}
$(document).mousemove(mouse);
}

在 Firefox 和 Chrome 上工作正常，但不幸的是，它在 IE 10 上不工作

这是一个 fiddle (我刚刚更改了图片):http://jsfiddle.net/22Feh/225/

知道如何解决吗？还是我应该忘记它不起作用的事实？

谢谢。

Answer 1

IE10 不需要-ms- 前缀来进行transform。 IE10 预览版需要它，但 IE10 的最终发布版本不需要。

因此，答案很简单，就是删除您一直在使用的 -ms- 前缀，并设置基本的 transform 样式:

img.css('transform', 'rotate('+degree+'deg)');

无论如何你都应该这样做——即使是使用前缀的浏览器也应该在标准的无前缀版本建立后删除对它们的支持，所以你也应该总是指定样式的无前缀版本，无论你在哪里使用前缀。

这里的工作示例:http://jsfiddle.net/22Feh/225/