1

我正在尝试 基于单独元素中的光标位置旋转元素 和 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);
}

​
4

4 回答 4

2

你需要编写这样的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>
于 2013-05-20T18:09:49.387 回答
1

你做错了几件事。看看这个：

<!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 代码。

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

于 2013-05-20T18:16:22.600 回答
0

应该类似于以下内容：

您也有错误的脚本引用。使用下面提供的 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>
于 2013-05-20T18:10:10.440 回答
0 
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

于 2019-02-28T22:22:35.737 回答