我已经通过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/
知道如何解决吗?还是我应该克服它不起作用的事实?
谢谢。
最佳答案
IE10不需要-ms-
的transform
前缀。 IE10预览版是必需的,而不是IE10的最终发行版。
因此,答案只是删除您一直在使用的-ms-
前缀,而只需设置基本的transform
样式即可:
img.css('transform', 'rotate('+degree+'deg)');
无论如何,您都应该这样做-即使使用前缀的浏览器也应该在建立标准无前缀版本之后在以后删除对它们的支持,因此无论您在何处使用前缀,都应始终指定样式的无前缀版本。
这里的工作示例:http://jsfiddle.net/22Feh/225/