JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="container">
    <center>
        <img id="elem" src="http://owen.yorkies.com/images/logo-wheel.png"></img>
    </center>
</div>
<div id="footer"></div>

CSS

#Tip {
    position: absolute;
    display: none;
    font-size: 14px;
    background-color: #fff;
}
#container {
    position:absolute;
    margin-left:100px;
    height:100%;
}
img {
    height: 62px;
    width: 62px;
}
#footer {
    
}
}

JavaScript

var angle = 0;
distance = 100;
$(document).ready(function () {
    $('body').append('<div id="Tip"></div>');
    $('body').mousemove(function (e) {
        //var offset = $('body').offset();
        //var distanceX = e.pageX - (offset.left + ($('#elem').width() / 2));
        //var distanceY = e.pageY - (offset.top + ($('#elem').height() / 2))
        
        var offset = { top: $(window).height(), left: $(window).width() / 2};
        var distanceX = e.pageX - (offset.left);
        var distanceY = e.pageY - (offset.top);
        distance = distanceX + distanceY;
        
        
        $('#Tip')
            .show()
            .css({
            'left': e.pageX + 16,
            'top': e.pageY + 16
        })
            .html('Position: ' + distanceX + ',' + distanceY + ', angle ' + angle);
    });
});


setInterval(function () {
    var plus = distance / 100;
    angle = angle - plus;
    $("#elem").rotate(angle);
}, 25);