我正在尝试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);
}
你做错了几件事。检查this：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:400px;
height:327px;
z-index:1;
left: 105px;
top: 98px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(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>
</head>
<body>
<div id="apDiv1"><img src="http://img402.imageshack.us/img402/2017/bighand.png" class="image"/> <br>
(Not actual picture I'm trying to rotate, but it'll do for now)
</div>
</body>
</html>
正如其他人指出的那样，您必须为外部js提供专用的脚本标记。此外，您应该在$（document）.ready（your_function_here）中包含您的jQuery代码;
编辑：在答案中包含代码。
你需要写这样的js代码：
请注意：在设置script标签的src属性时，所有嵌入的js代码都会被引擎剥离，使用其他脚本标记
<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>
应该是类似以下内容：
你也有糟糕的脚本引用。使用下面提供的CDN或在本地下载。除非您有特定要求，否则您正在使用旧版本的jQuery。
最后，不是为每种浏览器类型调用img.css（key，val）而是你是对的，你需要考虑将其作为对象传递。 img.css（{key：val，key：val}）等等。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var img = $('.image');
var offset = img.offset();
$(document).mousedown(function (e) {
var center_x = (offset.left) + (img.width() / 2);
var center_y = (offset.top) + (img.height() / 2);
var mouse_x = e.pageX;
var mouse_y = e.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)');
});
});
</script>
function mmove (e) {
e.preventDefault();
var element = ell[0];
var ofs = ell.offset();
ofs.left += ell.height()/2;
ofs.top += ell.width()/2;
var mouseX = e.pageX;
var mouseY = e.pageY;
var x = mouseX - ofs.left;
var y = mouseY - ofs.top;
var angle = Math.atan2(x, y);
angle = (angle * (180 / Math.PI) *-1) + 225;
angle = ((angle + 360) | 0) % 360;
var degree = angle;
element.style.transform = 'rotate('+degree+'deg)';
element.style.webkitTransform = 'rotate('+degree+'deg)';
element.style.MozTransform = 'rotate('+degree+'deg)';
element.style.msTransform = 'rotate('+degree+'deg)';
scope.collection[scope.index].transform = 'rotate('+degree+'deg)';
//console.log(mouseX, mouseY, centerX, centerY, radians, degree);
}