CODEWITHSUNDEEP
javascriptjqueryhtml
Luthfan Pramono
Luthfan Pramono

Reputation: 43

Rotating image on mouse down

I'm trying the code from Rotating an element based on cursor position in a separate element and http://jsfiddle.net/JqBZb/

I rewrite it in a full code at link below, but in won't work..

https://www.dropbox.com/s/z1tqv56vjzsq0f0/rotateonmousedown.html.txt

is there any idea??

jquery code

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

​

Upvotes: 1

Views: 3717

Answers (4)

Mikhail Malakhvei
Mikhail Malakhvei

Reputation: 117

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

Upvotes: 0

khattam
khattam

Reputation: 1174

You're doing a couple of things wrong. Check this out:

<!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>

As others have pointed out, you must have dedicated script tag for external js. Also, you should include your jQuery code in $(document).ready(your_function_here);

EDIT: included code in the answer.

Upvotes: 1

origin1tech
origin1tech

Reputation: 749

Should be something like the following:

You also have bad script references. Use the CDN provide here below or you download it locally. Unless you have a specific requirement you were using and older version of jQuery.

Lastly instead of calling img.css(key,val) for each browser type and you're right you need to account for that pass it as an object instead. img.css({ key:val, key:val }) and so on.

<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>

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You need to write js code like this:

Please note: when setting src attribute of script tag, all embeded js code will be stripped out by engine, use other script tag

<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>

Upvotes: 2

Related Questions