div带图片拖拽缩放

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jQuery拖拽放大缩小插件idrag</title>

    <style type="text/css">

        #box {
            width: 200px;
            height: 100px;
            cursor: move;
            position: absolute;
            top: 30px;
            left: 30px;
            background-color: #FFF;
            border: 1px solid #CCCCCC;
            -webkit-box-shadow: 10px 10px 25px #ccc;
            -moz-box-shadow: 10px 10px 25px #ccc;
            box-shadow: 10px 10px 25px #ccc;
            background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544168858724&di=d4a1a7286e6ab6d7f6a5f3c07f4e9c55&imgtype=0&src=http%3A%2F%2Fpic19.nipic.com%2F20120210%2F7827303_221233267358_2.jpg');
            background-size: 100% 100%;

        }

        #coor {
            width: 8px;
            height: 8px;
            overflow: hidden;
            cursor: se-resize;
            position: absolute;
            right: -3px;
            bottom: -3px;
            opacity: 0.8;
            background-color: #09C;
            border: 1px dashed #fff ;
        }

        body {
            background-color: #eee;
        }

    </style>
</head>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<body style="">
<div id="box" style="width: 225.021px; height: 112.021px; top: 131.972px; left: 143.958px;">
    <div id="coor"></div>
</div>


</body>
</html>

<script>
    
    $(function () {
        $(document).mousemove(function (e) {
            if (!!this.move) {
                var posix    = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
                    callback = document.call_down || function () {
                        $(this.move_target).css({
                            'top': e.pageY - posix.y,
                            'left': e.pageX - posix.x
                        });
                    };

                callback.call(this, e, posix);
            }
        }).mouseup(function (e) {
            if (!!this.move) {
                var callback = document.call_up || function () {
                };
                callback.call(this, e);
                $.extend(this, {
                    'move': false,
                    'move_target': null,
                    'call_down': false,
                    'call_up': false
                });
            }
        });

        var $box = $('#box').mousedown(function (e) {
            var offset = $(this).offset();

            this.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
            $.extend(document, {'move': true, 'move_target': this});
        }).on('mousedown', '#coor', function (e) {
            var posix = {
                'w': $box.width(),
                'h': $box.height(),
                'x': e.pageX,
                'y': e.pageY
            };

            $.extend(document, {
                'move': true, 'call_down': function (e) {
                    $box.css({
                        'width': Math.max(30, e.pageX - posix.x + posix.w),
                        'height': Math.max(30, e.pageY - posix.y + posix.h)
                    });
                }
            });
            return false;
        });
    });
</script>
div带图片拖拽缩放

猜你喜欢
