zoukankan      html  css  js  c++  java
  • JQ

     图片在元素内拖拽/缩放

    • 先获取到起始坐标(在容器里鼠标按下时鼠标在浏览器页面中的位置)
    • 鼠标移动时再计算出当前鼠标当前坐标和起始坐标的距离,再使用 position 把图片定位跟随鼠标移动
    • 拖动图片时设置图片拖动边界限制
    • 滚轮上下滚动时放大缩小图片

    css

    *{ margin:0; padding:0; }
    div{ width:600px; height:400px; background:#FFF; border:1px solid slateblue; position:relative; overflow:overlay; margin:20px auto; }
    img{ position:absolute; left:0; top:0; transform:scale(1); }
    img:active{ cursor:move; }
    ::-webkit-scrollbar { width:6px; height:6px; background-color:#F5F5F5; }
    ::-webkit-scrollbar-thumb { background-color:#3d4a5dd9; }
    ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3); background-color:#F5F5F5; }

     HTML

    <div class="dragImage" ></div>

     JS

    $(function(){
        class DRAGIMAGE {
            constructor({ $dom, img, $zoomMax, $zoomMin }){
                let that = this;
                this.$dom = $dom;    // dom
                this.$dom.html(`<img src="${img}" draggable="false" />`);    // 图片放进盒子
                this.$img = $dom.find("img");         // img
                this.$start_x = 0;                    // 鼠标起始坐标x
                this.$start_y = 0;                    // 鼠标起始坐标y
                this.$move_left = 0;                // 鼠标向左移动距离
                this.$move_top = 0;                    // 鼠标向上移动距离
                this.$img_left = 0;                    // 图片当前定位 left
                this.$img_top = 0;                    // 图片当前定位 top
                this.$img_width = 0;                // 图片实际宽度
                this.$img_height = 0;                // 图片实际高度
                this.$dom_width = $dom.width();         // 父盒子宽度
                this.$dom_height = $dom.height();    // 父盒子高度
                this.$zoom = 100;                    // 缩放大小 100正常大小 
                this.$zoom_Max = ($zoomMax*100) || 200 ;    // 最大缩放
                this.$zoom_Min = ($zoomMin*100) || 0.5 ;     // 最小缩放 
    
                var image = new Image();
                image.src = img;
                image.onload = function(){
                    // 获取到图片实际宽高
                    that.$img_width = image.width;
                    that.$img_height = image.height;
                    // 鼠标按下执行
                    that.mouseDown(); 
                }
                // 滚轮事件 放大缩小图片
                that.mouseWheel();
                // 鼠标抬起 清除移动事件
                that.$dom.on("mouseup", function(e){ that.stopmove() });
                // 鼠标移出父盒子 清除移动事件
                that.$dom.on("mouseout", function(e){ that.stopmove() });
            }
            /*
                鼠标按下时触发
                获取鼠标在图片内的坐标
            */ 
            mouseDown () {
                let that = this;
                that.$img.on("mousedown", function(e){
                    e = e || event;
                    // 获取起始坐标
                    that.$start_x = e.clientX;
                    that.$start_y = e.clientY;
                    that.stopmove(); // 清除移动事件
                    that.mouseMove(); // 鼠标移动
                    return false;
                })
            }
            /*
                鼠标移动事件
                获取鼠标在图内的移动距离: 图片当前定位 - ( 起始坐标 - 当前坐标 )
            */
            mouseMove () {
                let that = this;
                that.$dom.on("mousemove", function(e){
                    e = e || event;
                    /* 获取鼠标移动距离 */
                    that.$move_left = that.$img_left - ( that.$start_x - e.clientX );
                    that.$move_top = that.$img_top - ( that.$start_y - e.clientY );
                    // 随鼠标移动 更新图片定位
                    that.setPosition();
                    return false;
                })
            }
            /*
                滚轮事件 放大缩小图片
            */
            mouseWheel () {
                let that = this;
                that.$dom.on("mousewheel", function(e){
                    e = e || event;
                    e.stopPropagation();
                    e.preventDefault();
                    let width, height;
                    //判断上下滚动 chrome & ie || firefox
                    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); 
                    // delta > 0 上滚 ,delta < 0 下滚
                    if (delta > 0) {
                        ++that.$zoom;
                    if (that.$zoom>=that.$zoom_Max) 
                        that.$zoom = that.$zoom_Max; // 限制最大缩放
                        if (that.$zoom <= that.$zoom_Max) 
                            width = that.$img_width*((that.$zoom)/100);
                            height = that.$img_height*((that.$zoom)/100);
                    } else if (delta < 0) {
                        --that.$zoom;
                        if (that.$zoom<=that.$zoom_Min) 
                            that.$zoom = that.$zoom_Min; // 限制最小缩放
                        if (that.$zoom >= that.$zoom_Min) 
                            width = that.$img_width*((that.$zoom)/100);
                            height = that.$img_height*((that.$zoom)/100);
                    }
                    that.scaleImg({width, height}); // 对图片进行缩放
                    that.setPosition();
                    return false;
                })
            }
            /*
                通过改变 width/height 进行缩放
            */ 
            scaleImg ( { width, height } ) {
                this.$img.css({ 'width': width, 'height': height });
            }
            /*
                设置图片定位, 边界限制
                    左/上限制:图片当前宽高 大于/小于 父盒子的宽高
                        鼠标移动距离 = 0
                    右/下限制:(鼠标移动距离-父盒子最大宽高)大于当前图片宽高 || 鼠标移动距离大于 -(当前图片宽高-父盒子最大宽高)
                        鼠标移动距离 = -(当前图片宽高 - 父盒子宽高);
            */ 
            setPosition () {
                let that = this;
                // 图片当前宽高大于父盒子的宽高 || 图片当前宽高小于父盒子的宽高
                /* 左/上 */
                if ( that.$move_left>=0 && that.$img.width()>that.$dom_width || that.$move_left<=0 && that.$img.width()<that.$dom_width ) 
                    that.$move_left = 0;
                if ( that.$move_top>=0 && that.$img.height()>that.$dom_height || that.$move_top<=0 && that.$img.height()<that.$dom_height  ) 
                    that.$move_top = 0;
                /* 右/下 */ 
                if ( Math.abs(( that.$move_left-that.$dom_width ))>=that.$img.width() && that.$img.width()>that.$dom_width || that.$move_left>=(-(that.$img.width() - that.$dom_width)) && that.$img.width()<that.$dom_width ) 
                    that.$move_left = -(that.$img.width() - that.$dom_width);
                if ( Math.abs(( that.$move_top-that.$dom_height ))>=that.$img.height() && that.$img.height()>that.$dom_height || that.$move_top>=(-(that.$img.height() - that.$dom_height)) && that.$img.height()<that.$dom_height ) 
                    that.$move_top = -(that.$img.height() - that.$dom_height);
                // 定位移动的距离 = 鼠标移动的距离    
                that.$img.css({ 
                    'left': that.$move_left, 
                    'top': that.$move_top 
                });
            }
            // 停止鼠标移动
            stopmove(){
                /* 清除移动事件,绑定图片当前定位 */
                this.$dom.unbind('mousemove');
                this.$img_left =  this.$img.position().left;
                this.$img_top =  this.$img.position().top;
            }
        }
    var dragImage = new DRAGIMAGE({ $dom: $('.dragImage'), // 图片的父元素 img: "https://images.cnblogs.com/cnblogs_com/sanyekui/1693114/o_200409094205e56bf2254d1496cb6138b6cb271a2cf9.jpg", // 图片路径 $zoomMax: 4, // 缩放最大倍数,1正常大小 $zoomMin: 0.2 // 缩放最小倍数,1正常大小 });
    })

     

  • 相关阅读:
    Asp.net 动态添加Meta标签
    【转】在SharePoint Server 2010中更改“我的网站”
    SPQuery DateTime 类型查询
    Asp.net Web Application 打开 SharePoint 2010 Site 错误 The Web application at could not be found
    How To Create SharePoint 2010 Site Collection In Its Own DB
    C# 文件打印
    面试题 java集合
    《深入理解Java虚拟机》(六)堆内存使用分析,垃圾收集器 GC 日志解读
    《深入理解Java虚拟机》(五)JVM调优
    《深入理解Java虚拟机》(四)虚拟机性能监控与故障处理工具
  • 原文地址:https://www.cnblogs.com/sanyekui/p/13381485.html
Copyright © 2011-2022 走看看