JQuery实现图片拖拽缩放特效

越陌度阡

发布于 2022-11-27 17:38:45

10.3K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

给大家分享一个基于JQuery实现的图片拖拽缩放特效，效果如下：

实现代码如下，欢迎大家复制粘贴。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>基于JQuery实现的图片拖拽缩放特效</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('images/1.jpg');
            background-size: 100% 100%;
        }

        #dot {
            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;
        }
    </style>
</head>



<body>

    <div id="box" style="width: 100px; height: 100px; top: 100px; left: 100px;">
        <div id="dot"></div>
    </div>

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

    <script>
        $(function () {
            $(document).mousemove(function (e) {

                // 是否为目标移动
                if (!!this.move) {

                    var position = !document.moveTarget ? {'x': 0,'y': 0} : document.moveTarget.position;

                    var callback = document.callDown || function () {

                        var top = e.pageY - position.y;
                        var left = e.pageX - position.x;

                        $(this.moveTarget).css({
                            'top': top,
                            'left': left
                        });
                    };

                    callback.call(this, e, position);
                };

            }).mouseup(function (e) {

                if (!!this.move) {
                    var callback = document.callUp || function () {};

                    callback.call(this, e);

                    $.extend(this, {
                        'move': false,
                        'moveTarget': null,
                        'callDown': false,
                        'callUp': false
                    });

                }
            });

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

                var offset = $(this).offset();

                this.position = {
                    'x': e.pageX - offset.left,
                    'y': e.pageY - offset.top
                };

                $.extend(document, {
                    'move': true,
                    'moveTarget': this
                });

            }).on('mousedown', '#dot', function (e) {

                var position = {
                    'w': $box.width(),
                    'h': $box.height(),
                    'x': e.pageX,
                    'y': e.pageY
                };

                $.extend(document, {
                    'move': true,
                    'callDown': function (e) {
                        var width = e.pageX - position.x + position.w;
                        var height = e.pageY - position.y + position.h;
                        $box.css({
                            'width': Math.max(30, width),
                            'height': Math.max(30, height)
                        });
                    }
                });
                return false;
            })
        });
    </script>  

</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-07-24，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery