JS移动、旋转div

实现效果

JS叠加、移动、旋转div

实现方式对比

1、添加div
2、通过rotate插件实现旋转
3、通过键盘监听，添加移动事件
效果测试地址

初步代码示例

var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && (e.keyCode == 187 || e.keyCode == 107)) { // +
            //向右旋转5°
            var value = 5;
            if ($('.highlight').getRotateAngle() != "") {
                value = parseInt($('.highlight').getRotateAngle()) + 5;
            }
            $('.highlight').rotate({ animateTo: value });
        }
        else if (e && (e.keyCode == 189 || e.keyCode == 109)) { // -
            //向左旋转5°
            var value = -5;
            if ($('.highlight').getRotateAngle() != "") {
                value = parseInt($('.highlight').getRotateAngle()) - 5;
            }
            $('.highlight').rotate({ animateTo: value });
        }
        else if (e && e.keyCode == 37) {// <-
            //向左移动
            $(".highlight").css({ "left": $('.highlight').position().left - 5 });
        }
        else if (e && e.keyCode == 38) {// <-
            //向上移动
            $(".highlight").css({ "top": $('.highlight').position().top - 5 });
        }
        else if (e && e.keyCode == 39) {// <-
            //向右移动
            $(".highlight").css({ "left": $('.highlight').position().left + 5 });
        }
        else if (e && e.keyCode == 40) {// <-
            //向下移动
            $(".highlight").css({ "top": $('.highlight').position().top + 5 });
        }

发现问题

平移时显示正常，但是如果div旋转后，移动方向不正确，例如：无法下移。

问题原因

对比发现，旋转div后，通过 $('.highlight').position().left 获取与 实际标签中left不一致，如果div水平方向则正常，后换一种方式获取left、top解决。

修改后代码

var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && (e.keyCode == 187 || e.keyCode == 107)) { // +
            //向右旋转5°
            var value = 5;
            if ($('.highlight').getRotateAngle() != "") {
                value = parseInt($('.highlight').getRotateAngle()) + 5;
            }
            $('.highlight').rotate({ animateTo: value });
        }
        else if (e && (e.keyCode == 189 || e.keyCode == 109)) { // -
            //向左旋转5°
            var value = -5;
            if ($('.highlight').getRotateAngle() != "") {
                value = parseInt($('.highlight').getRotateAngle()) - 5;
            }
            $('.highlight').rotate({ animateTo: value });
        }
        else if (e && e.keyCode == 37) {// <-
            //向左移动
            $(".highlight").css({ "left": parseInt($('.highlight').css("left")) - 5 });
        }
        else if (e && e.keyCode == 38) {// <-
            //向上移动
            $(".highlight").css({ "top": parseInt($('.highlight').css("top")) - 5 });
        }
        else if (e && e.keyCode == 39) {// <-
            //向右移动
            $(".highlight").css({ "left": parseInt($('.highlight').css("left")) + 5 });
        }
        else if (e && e.keyCode == 40) {// <-
            //向下移动
            $(".highlight").css({ "top": parseInt($('.highlight').css("top")) + 5 });
        }