interactive turntable

by faytAlvein

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<html>
    <head>
      
      
        <script>
        $(function()
        {
            $("#leftDisc").rotate();
             $("#rightDisc").rotate();
        });
        </script>
    </head>
    <body>
        <div>
            <img id="turnTableImage" src="turntable.jpg" height="400" width="600" alt="" />
        </div>

        <div id="leftDisc" style="margin-top: -80px; margin-left: 50px">
            left<img id="leftDiscImg" class="discs" height="200" src="http://2.bp.blogspot.com/-LJCJyRBNXvM/SfZ7IDfGZ1I/AAAAAAAAAYc/yGdmtP4REkk/s1600/vinyl-record.gif" alt="" />
        </div>

        <div id="rightDisc" style="margin-top: 0px; margin-left: 350px">
            <img id="rightDiscImg" class="discs" height="200px" src="http://2.bp.blogspot.com/-LJCJyRBNXvM/SfZ7IDfGZ1I/AAAAAAAAAYc/yGdmtP4REkk/s1600/vinyl-record.gif" alt="" />right
        </div>
    </body>
</html>

JavaScript

(function($)
{    
    $.fn.rotate = function()
    {
        var $img = this.find(".discs");
        var imgpos = $img.position();
        var x, y, xCenter, yCenter, x1, y1, deg = 1, drag = false;

       var imgInterval = setInterval(function()
        {
            deg++;
            $img.css({"transform":"rotate("+deg+"deg)",
              "-moz-transform":"rotate("+deg+"deg)",
              "-webkit-transform": "rotate("+deg+"deg)",
              "-o-transform": "rotate("+deg+"deg)",
              "ms-transform":"rotate("+deg+"deg)"});
        }, 20);

        $(window).load(function()
        {
            $img.removeAttr("width");
            $img.removeAttr("height");

            xCenter = imgpos.left + ($img.width() / 2);
            yCenter = imgpos.top + ($img.height() / 2);
        });
        
        $img.mousemove(function(e)
        {
            x1 = e.pageX;
            y1 = e.pageY;
            x = x1 - xCenter;
            y = y1 - yCenter;

            r = 360 - ((180/Math.PI) * Math.atan2(y,x));

            if(drag == true)
            {
                $img.css({"transform":"rotate(-"+r+"deg)",
                  "-moz-transform":"rotate(-"+r+"deg)",
                "-webkit-transform":"rotate(-"+r+"deg)",
                "-o-transform":"rotate(-"+r+"deg)",
                "ms-transform":"rotate(-"+r+"deg)"});
            }
        });

        $img.mouseover(function()
        {
            clearInterval(imgInterval);
            deg = 1;

            if(drag == false)
            {
                drag = true;
            }
            else
            {
                drag = false;
            }
        });

        $img.mouseout(function()
        {
            drag = false;

            imgInterval = setInterval(function()
            {
                deg++;
                $img.css({"transform":"rotate("+deg+"deg)",
                  "-moz-transform":"rotate("+deg+"deg)",
                 ...