找回密码
当前位置：前端开发者 > 教程 > 正文

网页前端开发制作盒子拖拽、缩放

2018-07-30 分类：教程 阅读(915) 评论(0)

适合前端开发的编辑器|前端组件化开发的优势|前端开发五种盒子有哪些

html 代码

<!DOCTYPE html>
<html lang=”zh-cn” class=”hb-loaded”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
    <title>前端部门开发包括哪些问题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,
        html {
            width: 100%;
            height: 100%;
            background: black;
        }
        .bigBox {
            width: 100%;
            height: 100%;
            position: relative;
            display: block;
        }
        .drag-box {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 5;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class=”bigBox”>
        <div class=”drag-box”>
        </div>
    </div>
    <script src=”http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js”></script>
    <script src=”https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.js”></script>
    <script>
        //拖拽、缩放
        $(function () {
            var $drag = $(“.bigBox”)
            var $dragBox = $(“.drag-box”);
            var $smdragBox = $(“.drag-box-small”);
            var $cBtn = $(“.s-btn”);
            var tz = 0;
            var bs = 100;
            var minWidth = $dragBox.outerWidth();
            var maxWidth = minWidth * 3;
            $(document).bind(“selectstart”, function () {
                return false;
            });
            $dragBox.mouseover(function (e) {
                $dragBox.css({ ‘cursor’: ‘move’ })
            });
            $dragBox.mousedown(function (e) {
                e.preventDefault();
                var positionDiv = $(this).offset();
                var distenceX = e.pageX – positionDiv.left;
                var distenceY = e.pageY – positionDiv.top;
                $(document).mousemove(function (e) {
                    e.preventDefault();
                    var x = e.pageX – distenceX;
                    var y = e.pageY – distenceY;
                    if (x < 0) {
                        x = 0;
                    } else if (x > $drag.width() – $dragBox.outerWidth(true)) {
                        x = $drag.width() – $dragBox.outerWidth(true);
                    }
                    if (y < 0) {
                        y = 0;
                    } else if (y > $drag.height() – $dragBox.outerHeight(true)) {
                        y = $drag.height() – $dragBox.outerHeight(true);
                    }
                    $dragBox.css({
                        ‘left’: x + ‘px’,
                        ‘top’: y + ‘px’
                    });
                });
                $(document).mouseup(function () {
                    e.preventDefault();
                    $(document).unbind(‘mousemove’);
                    $(document).unbind(‘mouseup’);
                });
            }).mousewheel(function (e, d) {
                if (tz >= 3 && d > 0) {
                    tz = 3;
                    return;
                } else if (tz <= 0 && d < 0) {
                    tz = 0;
                    return;
                }
                tz += d;
                var offset = $(this).offset();
                var w = $(this).outerWidth();
                var h = $(this).outerHeight();
                var changePx = d * bs;
                if (w + changePx < minWidth || w + changePx > maxWidth) {
                    return;
                }
                $dragBox.css({
                    ‘width’: w + changePx + ‘px’,
                    ‘height’: h + changePx + ‘px’,
                    ‘left’: offset.left – changePx / 2 + ‘px’,
                    ‘top’: offset.top – changePx / 2 + ‘px’
                });
            });
        });
    </script>
</body>
</html>

前端开发五种盒子有哪些|房地产前端融资和开发贷区别|前端开发和后台开发区别

赞(0)
前端开发者 » 网页前端开发制作盒子拖拽、缩放
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论