<!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 {

        width: 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>

图片拖拽缩放功能：兼容Chrome、Firefox、IE8+的更多相关文章

  1. Vue富文本编辑器（图片拖拽缩放）

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  2. vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

    最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放, ...

  3. Android 仿微信朋友圈发表图片拖拽和删除功能

    朋友圈实现原理 我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...

  4. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

  5. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  6. 自制一个H5图片拖拽、裁剪插件（原生JS）

    前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...

  7. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  8. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  9. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

随机推荐

  1. 三星N900(note3)刷机包 颓废N0.8.1 修复已知BUG 集成谷歌服务

    ROM介绍 8.1更新信息:攻克了来电后点击HOME出现SECPHONE已经停止的问题 去掉了桌面隐藏信息的选项,官方最新底包暂不支持这功能 增加了网友们须要验证的谷歌服务(不须要的同学同步什么的都关 ...

  2. 7. java操作MongoDB，采用_id查询

    转自:https://www.2cto.com/database/201704/633262.html mongodb命令行_id查询方法 直接用ObjectId() db.getCollection ...

  3. centos 6.5搭建Samba

    Samba共享服务器 先将selinux关闭和防火墙端口号打开 #iptables -A INPUT -p udp -dport -j ACCEPT #iptables -A INPUT -p udp ...

  4. js正则学习分享

    http://www.cnblogs.com/rubylouvre/archive/2010/03/09/1681222.html http://www.cnblogs.com/tylerdonet/ ...

  5. Java基础算法

    i++;++i; i--;--i; int a=5;int b=a++;++放在后面,表示先使用a的值,a再加1b=5,a=a+1,a=6 int c=5;int d=++c;++放在前面,表示先将c ...

  6. rman 备份并异机恢复

    1.RMAN 备份脚本 RUN { CONFIGURE RETENTION POLICY DAYS; CONFIGURE CONTROLFILE AUTOBACKUP ON; CONFIGURE CO ...

  7. iscsi共享存储的简单配置和应用

    1.环境介绍 SCSI(Small Computer System Interface)是块数据传输协议,在存储行业广泛应用,是存储设备最基本的标准协议.从根本上说,iSCSI协议是一种利用IP网络来 ...

  8. php 图片局部打马赛克

    php 图片局部打马赛克 原理: 对图片中选定区域的每一像素,添加若干宽度及高度,生成矩型.而每一像素的矩型重叠在一起.就形成了马赛克效果. 本例使用GD库的imagecolorat获取像素颜色,使用 ...

  9. POJ 2533 Longest Ordered Subsequence（dp LIS）

    Language: Default Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submis ...

  10. 目标决定人生——没有目标就失去一切 （没有目标的奋斗是浪费青春，比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账）good

    没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...