Question

我正在尝试代码 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);
}

Answer 1

你需要写这样的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>

Answer 2

你做错了几件事。检查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代码

编辑：在答案中包含代码。

Answer 3

应该是以下内容：

您还有错误的脚本引用。使用下面提供的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>

Answer 4

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

https://next.plnkr.co/plunk/VeYtZ4

鼠标向下旋转图像

4 个答案: