我正在尝试来自 Rotating an element based on cursor position in a separate element 和 http://jsfiddle.net/JqBZb/
我在下面的链接中用完整代码重写了它,但是不起作用..
https://www.dropbox.com/s/z1tqv56vjzsq0f0/rotateonmousedown.html.txt
有什么想法吗??
jquery代码
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).mousedown(mouse);
}
最佳答案
你需要这样写js代码:
请注意:设置script标签的src属性时,所有嵌入的js代码都会被引擎剥离,使用其他script标签
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
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).mousedown(mouse);
}
});
</script>
关于javascript - 鼠标向下旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16655495/