Javascript 鼠标向下旋转图像

我正在尝试从 和

我在下面的链接中用完整的代码重写了它，但在中是行不通的

有什么想法吗

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代码：

请注意：在设置脚本标记的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>

$（函数（）{
var img=$（'.image'）；
如果（img.length>0）{
var offset=img.offset（）；
功能鼠标（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（鼠标x-中心x，鼠标y-中心y）；
变量度=（弧度*（180/数学π）*-1）+90；
css（'-moz transform'，'rotate（'+degree+'deg'）；
css（'-webkit transform'，'rotate（'+degree+'deg'）；
css（'-o-transform'，'rotate（'+degree+'deg'）；
css（'-ms transform'，'rotate（'+degree+'deg'）；
}
$（文档）.mousedown（鼠标）；
}
});

应该是以下内容：

您也有错误的脚本引用。使用下面提供的CDN，或在本地下载。除非您有一个特定的需求，您正在使用的是jQuery的旧版本

最后，不是为每种浏览器类型调用img.css（key，val），而是需要考虑将其作为对象传递。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>

$（文档）.ready（函数（）{
var img=$（'.image'）；
var offset=img.offset（）；
$（文档）.mousedown（函数（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（鼠标x-中心x，鼠标y-中心y）；
变量度=（弧度*（180/数学π）*-1）+90；
css（'-moz transform'，'rotate（'+degree+'deg'）；
css（'-webkit transform'，'rotate（'+degree+'deg'）；
css（'-o-transform'，'rotate（'+degree+'deg'）；
css（'-ms transform'，'rotate（'+degree+'deg'）；
});
});

你做错了几件事。退房：

无标题文件
#apDiv1{
位置：绝对位置；
宽度：400px；
高度：327px；
z指数：1；
左：105px；
顶部：98px；
}
$（文档）.ready（函数（）{
var img=$（'.image'）；
如果（img.length>0）{
var offset=img.offset（）；
功能鼠标（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（鼠标x-中心x，鼠标y-中心y）；
变量度=（弧度*（180/数学π）*-1）+90；
css（'-moz transform'，'rotate（'+degree+'deg'）；
css（'-webkit transform'，'rotate（'+degree+'deg'）；
css（'-o-transform'，'rotate（'+degree+'deg'）；
css（'-ms transform'，'rotate（'+degree+'deg'）；
}
$（文档）.mousedown（鼠标）；
}
});


（不是我试图旋转的实际图片，但现在可以了）

正如其他人所指出的，您必须为外部js提供专用的脚本标记。另外，您应该在$（document.ready）中包含jQuery代码（这里是您的函数）

编辑：答案中包含代码

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);
      }

---

只需使用

.mousedown

事件清除缓存，查看是否仍不工作。如果您在控制台中登录时出现错误，请随意分享……我实际上将其放在了一个页面中，并检查了它们是否都有效。也许你应该解释得更多，或者它可能不像你预期的那样，但它确实遵循鼠标的x/y方向。@LuthfanPramono复制并超过了我在那里的所有内容，包括$（document.ready）（函数（）{}）；你也错过了它。@Luthfanpramoni我在这里为你建立了一个工作页面=>它只会在今天出现。@khattam。这项工作……谢谢。但是，当我将“rotateimage.html”重命名为“RotateMouseDown.html”时，它将不起作用。。这很奇怪，可能是缓存问题。按住Shift键并单击“刷新”按钮重新加载并再次检查。@C.Hazelton我已将代码从khattam复制粘贴到“rotateonmousedown.html”，但它无法工作。。它的weird@LuthfanPramono你看过我提供给你的直播页面了吗？它正在工作。这里也是=>。右键单击并选择“查看源”，如果需要，可以复制整个页面。抱歉，我们无能为力。@khattam，当我在您的代码上使用离线jquery-1.7.2.js时，它也不会起作用。。也许我的离线jquery库有问题

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);
      }