javascript - 大神过来帮下忙啊，跪求用jq实现鼠标拖动图片旋转代码？？

Question

大神发下代码啊。图标题所示，

Answer 1

个人觉得关键还是得用到CSS3过渡动画transition配合CSS3变换transform.
过渡: transition: all 1s ease-in-out;
旋转: transform: rotate(10deg);
倾斜: transform: skew(10deg);
缩放: transform: scale(3.0);
位移: transform: translate(100px, 10px);
至于"拖放"操作,可能得组合mousedown/mousemove/mouseup事件,可以看这里.

$(document).ready(function() {
    drag('#drag, #drag2, #drag3')
});

function drag(el) {
    $(el).each(function(){
        var position = $(this).position();
        var ptop = position.top;
        var pleft = position.left;
        var down = false;
        $(this).mousedown(function(event) {
            down = true;
            $(this).css({
                cursor: 'crosshair',
            });
            $(this).mousemove(function(event) {
                if (down == true) {
                    $(this).css({
                        cursor: 'crosshair',
                    });
                    var w = $(this).width();
                    var h = $(this).height();
                    var left3 = (w / 2) + 7;
                    var top3 = (h / 2) + 7;
                    $(this).css({
                        cursor: 'crosshair',
                        left: (event.clientX) + (3 * 3) - left3,
                        top: (event.clientY) + (3 * 3) - top3
                    });
                }
            }).mouseup(function() {
                down = false;
                $(this).css({
                    cursor: 'default',
                });
                $(this).animate({
                    top: ptop,
                    left: pleft
                }, 300);
            });
        });
    });
}

Answer 2

http://blog.csdn.net/aigochin...

Answer 3

这个我记得有jq插件的

Answer 4

window.onload = function() {
                var p = document.getElementById('box'),
                    centerX = p.clientWidth / 2,
                    centerY = p.clientHeight / 2,
                    left = p.offsetLeft,
                    top = p.offsetTop;

                p.addEventListener("mousemove", function(event) {
                    var pageX = event.pageX,
                        pageY = event.pageY;

                    var dy = pageY - (top + centerY),
                        dx = pageX - (left + centerX);

                    
                    var angle=180/Math.PI*Math.atan2(dy,dx);
                    
                    
                    document.getElementById('img').style.transform="rotate("+angle+"deg)";
                }, false)
            }