Image rotator using mouse drag event in Javascript_问答_开发者

I've been searching for this script all day. does anyone know any such script that I can use 开发者_Python百科to rotate an image using mouse drag event. using javascript.

thanks in advance.

I have an implmentation idea, as I'm going to need to write this one also, unless you already have a solution so I'd like to have it :)

anyway, do this:

/** edit: removed my pseudo-code in favor for the real one ahead **/

anyway... I'll implement this and let you know. unless of course, during the next few hours some one will send his implementation :-) /** edit: thanks for those who did **/

UPDATE: here it is, anyway (rotating one image over another:) it's working great, jsut do a little clean up if you're importing this. it's cross browser.

html:

<div id="centered" style=" /* margin-left:400px; computed in javacript*/ ">
    <img id="static" src="" style="position:absolute; z-index:-1">
    <img id="rotating" src="" >
</div>

include:

// jquery.min.js, jQueryRotate.js (discussed above)

javascript:

var alpha=0
var dragOrig = null
var mouseInPic = new Point(0,0)
var diff
var imageNo = 0

function swapImage_or_something(i /* or get src from somewhere else*/) {

    $("#static").attr("src", arrCfgImages[i].src)
    $("#rotating").attr("src", arrCfgImages[i].src)


    $("#static").height(450);
    $("#rotating").height(450);

    $("#centered").css ({
        "margin-left": ($(document).width()-$("#static").width())/2 
    })

    $("#rotating").rotate(0)

}


function doEventBinding() {

    $(document).bind("mousedown", function (e) {
        dragOrig = new Point (mouseInPic.x, mouseInPic.y)

        e.preventDefault() 
        return 


    });
    $(document).bind("mouseup", function (e) {
        if (dragOrig) {
            dragOrig = null
            alpha+=diff
            diff=0
        }
    }); 
    $(document).bind("mousemove", function (e) {
        var x = -1*(Math.round($("#rotating").width()/2+0.01) - (e.pageX - $("#rotating").offset().left - (isIE ? 2 : 0)))
        var y = Math.round($("#rotating").height()/2+0.01) - (e.pageY - $("#rotating").offset().top - (isIE ? 2 : 0))
        mouseInPic = new Point(x,y) 

        if (dragOrig) {
            var cp = new Point(0,0)
            var deg1 = getAngleBetweenPoints(dragOrig, cp)
            var deg2 = getAngleBetweenPoints(mouseInPic, cp)
            diff = (deg1-deg2)
            diff = diff<0 ? diff+360 : diff>360 ? diff-360 : diff
            diff = diff>180 ? diff-360 : diff
            //my$("debug").innerHTML = diff
            $('#rotating').rotate(alpha+diff); 
            e.preventDefault() 
        }
    });

}

also:

var toRAD = 1/180*Math.PI;
var toDEG = 180/Math.PI;
    function getAngle(dx,dy) {
        var ang
        if (dx!=0) {
            var rad = Math.atan(dy/dx) + (dx<0?Math.PI:0)
            ang = rad*toDEG
            if (ang<0) ang+=360;
        } else {
            ang = dy>0 ? 90 : 270;
        }
        return ang;
    }

    function getAngleBetweenPoints (p1, p2) {
        var dx = p1.x-p2.x
        var dy = p1.y-p2.y
        return getAngle (dx, dy)
    }

Greensock has a bery fancy spin functionality. Have a look at: https://www.greensock.com/draggable/ Scroll down to spin. Unfortunately it's not completelt free.

There you go. here is my solution it works only with IE for FF version you find out what is equivalent to vml objects in FF and other browsers:

<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">

<HEAD>
<script>
var dragok = false; 
var gotElementSelected = false;
var currentElement = null;

function move()
{
     if (dragok)
     {
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop; 

        //rotating
        document.getElementById(currentElement).style.rotation=tempX+tempY;

        return false;
     }
}

function down(){
     dragok = true;
     if(gotElementSelected && currentElement !=null) 
        {
             document.onmousemove = move;
             return false;
        }
 }

function up()
{
    if(gotElementSelected && currentElement !=null)
        {    
            gotElementSelected = false;
            dragok = false;
            document.onmousemove = null; 
            currentElement = null;  
        }
}
</script>

<STYLE>.rvml {
    BEHAVIOR: url(#default#VML)
}
</STYLE>
</HEAD>

<BODY bgcolor=DDDDDD>
<?xml:namespace prefix = rvml ns = "urn:schemas-microsoft-com:vml" />
<rvml:image style="POSITION: absolute; WIDTH: 100px; DISPLAY: none; HEIGHT: 100px; TOP: 100px; LEFT:100px; rotation: 0" id=myimage class=rvml 
onmousedown="gotElementSelected=true; currentElement=this.attributes.getNamedItem('id').value; selectedElement=currentElement;" 
onclick="select_element(this.attributes.getNamedItem('id').value); selectedElement=this.attributes.getNamedItem('id').value;" 
src = "path/to/your/image" coordsize = "21600,21600"></rvml:image>