1

我通过 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 中不起作用

这是一个小提琴（我只是改变了图片）：http: //jsfiddle.net/22Feh/225/

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

谢谢。

4

2 回答 2

2

-ms-IE10不需要transform. IE10 预览版需要它，但不是 IE10 的最终发布版本。

因此，答案只是删除-ms-您一直在使用的前缀，并设置基本transform样式：

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

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

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

于 2013-07-18T10:50:34.057 回答
1

也许你需要这个img.css('transform', 'rotate(' + degree + 'deg)');

如果你看这里http://caniuse.com/transforms2d IE10 不需要前缀。我不确定它是否接受前缀，但值得一试

于 2013-07-18T10:43:47.810 回答