zoukankan      html  css  js  c++  java
  • 图片拖拽缩放功能:兼容Chrome、Firefox、IE8+

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>拖拽图片demo</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <style>
        .test-box {
             500px;
            height: 400px;
            border: 1px solid yellow;
            overflow: hidden;
            margin: 30px auto;
            position: relative;
        }
        .test-img {
            position: absolute;
            top: 0;
            left: 0;
        }
        </style>
    </head>
    <body>
        <div class="test-box">
            <img class="test-img" src="http://images.669pic.com/element_psd/72/58/16/45/1c8e874b9b360550caab1a98a674cd73.jpg" alt="">
        </div>
        <script>
       // 缩放
       var imgZoom = {
            init: function() { 
                this.zoomImage();
            },
            zoomImage: function() {
                var _this = this;
                $('.test-box').off('mousewheel').on('mousewheel', '.test-img', function(e) {
                    _this.mouseScroll($(this));
                });
                $('.test-box').off('DOMMouseScroll').on('DOMMouseScroll', '.test-img', function(e) {
                    _this.mouseScroll($(this), e);
                });
            },
            mouseScroll: function($img,e) {
                var e = e || window.event;
                var oper = Math.max(-1, Math.min(1,(e.wheelDelta || -e.originalEvent.detail)));
                var imgWidth = $img.width();
                var newWidth = Math.max(350, Math.min(1200,imgWidth + (30*oper)));
                var left = parseInt($img.css("left")) - (newWidth - imgWidth) / 2;
                $img.css({
                    "width": newWidth + "px",
                    "left": left + "px"
                })
            },
        };
    
    
    
       // 拖拽
       var imgDrag = function() {
            var isDrag = false;
            var dragTarget;
            var startX, startY;
            var imgPositionTop,imgPositionLeft;
            var boxWidthMin, boxWidthMax, boxHeightMin, boxHeightMax;
            function moveMouse(e) {
                if (isDrag) {
                    var e = window.event || e;
                    var clientY = e.clientY;
                    var clientX = e.clientX;
                    if(clientY >= boxHeightMin && clientY <= boxHeightMax) {
                        dragTarget.style.top = imgPositionTop + clientY - startY + "px";
                    }
                    if(clientX >= boxWidthMin && clientX <= boxWidthMax) {
                        dragTarget.style.left = imgPositionLeft + clientX - startX + "px";
                    }
                    return false;
                }
            }
            function initDrag(e) {
                var e = window.event || e;
                var dragHandle = e.srcElement;
                var topElement = "HTML";
                var eventBtn = e.button == 0 || e.button == 1; // 鼠标左键
    
                while (dragHandle.tagName != topElement && dragHandle.className != "test-img") {
                    dragHandle = dragHandle.parentElement;
                }
                if (dragHandle.className == "test-img" && eventBtn) {
                    isDrag = true;
                    dragTarget = dragHandle;
                    imgPositionTop = parseInt(dragTarget.style.top + 0);
                    startY = e.clientY;
                    imgPositionLeft = parseInt(dragTarget.style.left + 0);
                    startX = e.clientX;
    
                    var initVal = 50;  // 防止图片拖出框内的最小边界值
                    var $box =  $('.test-box');
                    boxWidthMin = $box.offset().left + initVal;
                    boxWidthMax = $box.offset().left + $box.width() - initVal;
                    boxHeightMin = $box.offset().top + initVal;
                    boxHeightMax = $box.offset().top + $box.height() - initVal;
    
                    $(document).unbind('mousemove').bind('mousemove', moveMouse);
                    return false;
                }
            }
    
            $(document).unbind("mousedown").bind("mousedown", initDrag);
            $(document).unbind("mouseup").bind("mouseup", function() {
                isDrag = false;
            });
        };
    
        imgZoom.init();
        imgDrag();
        </script>
    </body>
    </html>
  • 相关阅读:
    陶瓷电容的结构、工艺、失效模式
    Vue.js最佳实践
    Vue 超快速学习
    CSS 小技巧
    HTML5 Canvas
    webkit下面的CSS设置滚动条
    Some untracked working tree files would be overwritten by checkout. Please move or remove them before you can checkout. View them
    JSCS: Please specify path to 'JSCS' package
    React中ref的使用方法
    React 60S倒计时
  • 原文地址:https://www.cnblogs.com/yhquan/p/10879652.html
Copyright © 2011-2022 走看看