首页新闻找找看学习计划

鼠标移动红框会有一点点的偏移

0
[待解决问题]
<!doctype html>

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
    <meta charset="utf-8" />
    <style type="text/css">
    body,html{ height:100%; }
        *{margin: 0;padding: 0;}
        .wrap{ width: 500px;height:100%; position: relative;margin: 0 auto;background: blue;transform: scale(0.8,0.8);}
        .box{ position: absolute;top:0;left:0; background: red;width: 200px;height: 200px; }
    </style>
</head>
<body>

        <div class="wrap">
            <div class="box"></div>
        </div>

    <script type="text/javascript">
        var element = $(".box") , e = $(".wrap");
        var startX = 0, startY = 0, posY = 0, posX = 0;
        element.on("mousedown", function (event) {
            startX = event.clientX - element.offset().left;
            startY = event.clientY - element.offset().top;

        });
        $(document).on("mousemove", function (event) {
            if (startX || startY) {
                posX = (event.clientX - e.offset().left) - startX;
                posY = (event.clientY - e.offset().top) - startY;

                element.css({
                    left: posX,
                    top: posY
                });
            }
        });
        $(document).on("mouseup", function () {
            startX = 0;
            startY = 0;
        });

    </script>

</body>
</html>

transform: scale(0.8,0.8)因为我加了css3属性缩放了。
怎么让它在缩放后 移动红框也正常啊?
直接复制代码本地运行就行

深蓝色梦想的主页 深蓝色梦想 | 初学一级 | 园豆:6
提问于:2015-08-03 10:54
< >
分享
所有回答(1)
0

posX = (event.clientX - e.offset().left) - startX;

posY = (event.clientY - e.offset().top) - startY;

posX / 0.8

posY /0.8

element.css({ left: posX, top: posY });

或者

; (function ($) {     $.extend($.fn, {         getPos: function () {             var target = this[0];             var left = target.offsetLeft;             var top = target.offsetTop;             var current = target.offsetParent;             while (current) {                 left += current.offsetLeft;                 top += current.offsetTop;                 current = current.offsetParent;             }             return { left: left, top: top }         }     }) })($)

替换offset方法

长蘑菇星人 | 园豆:1820 (小虾三级) | 2015-08-04 09:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册