网上搜的资料，源码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <style>

        * {

            margin: 0;

            padding: 0

        }

        .box {

            position: absolute;

            top: 100px;

            left: 100px;

        }

        /*四边*/

        .box .t,

        .box .b,

        .box .l,

        .box .r {

            position: absolute;

            z-index: 1;

            background:#666;

        }

        .box .l,

        .box .r {

            width: 10px;

            height: 100%;

            cursor: col-resize;

        }

        .box .t,

        .box .b {

            width: 100%;

            height: 10px;

            cursor: row-resize;

        }

        .box .t {

            top: 0;

        }

        .box .b {

            bottom: 0;

        }

        .box .l {

            left: 0;

        }

        .box .r {

            right: 0;

        }

        /*四角*/

        .box .tl,

        .box .bl,

        .box .br,

        .box .tr {

            width: 20px;

            height: 20px;

            position: absolute;

            background: #CCC;

            z-index: 2;

            cursor: nwse-resize

        }

        .box .tl,

        .box .bl {

            left: -5px;

        }

        .box .tr,

        .box .br {

            right: -5px;

        }

        .box .br,

        .box .bl {

            bottom: -5px;

        }

        .box .tl,

        .box .tr {

            top: -5px;

        }

        .box .tr,

        .box .bl {

            cursor: nesw-resize;

        }

        /*图片*/

        img {

            width: 100%;

            height: 100%;

        }

    </style>

    <script>

        window.onload = function () {

            var oDiv = document.getElementsByTagName('div')[0];

            oDiv.style.width = '500px';

            var aSpan = oDiv.getElementsByTagName('span');

            for (var i = 0; i < aSpan.length; i++) {

                dragFn(aSpan[i]);

            }

            function dragFn(obj) {

                obj.onmousedown = function (ev) {

                    var oEv = ev || event;

                    var oldWidth = oDiv.offsetWidth;

                    var oldHeight = oDiv.offsetHeight;

                    var oldX = oEv.clientX;

                    var oldY = oEv.clientY;

                    var oldLeft = oDiv.offsetLeft;

                    var oldTop = oDiv.offsetTop;

                    document.onmousemove = function (ev) {

                        var oEv = ev || event;

                        if (obj.className == 'tl') {

                            oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';

                            oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';

                            oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';

                            oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';

                        }

                        else if (obj.className == 'bl') {

                            oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';

                            oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';

                            oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';

                            oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';

                        }

                        else if (obj.className == 'tr') {

                            oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';

                            oDiv.style.height = oldHeight - (oEv.clientY - oldY)+'px';

                            oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';

                            oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';

                        }

                        else if (obj.className == 'br') {

                            oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';

                            oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';

                            oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';

                            oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';

                        }

                        else if (obj.className == 't') {

                            oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';

                            oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px';

                        }

                        else if (obj.className == 'b') {

                            oDiv.style.height = oldHeight + (oEv.clientY - oldY)+'px';

                            oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';

                        }

                        else if (obj.className == 'l') {

                            oDiv.style.height = oldHeight + 'px';

                            oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';

                            oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';

                        }

                        else if (obj.className == 'r') {

                            oDiv.style.height = oldHeight + 'px';

                            oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';

                            oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';

                        }

                    };

                    document.onmouseup = function () {

                        document.onmousemove = null;

                    };

                    return false;

                };

            }

        };

    </script>

</head>

<body>

<div class="box">

    <span class="r"></span>

    <span class="l"></span>

    <span class="t"></span>

    <span class="b"></span>

    <span class="br"></span>

    <span class="bl"></span>

    <span class="tr"></span>

    <span class="tl"></span>

    <img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/730-350-0.jpg">

</div>

</body>

</html>

原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小的更多相关文章

  1. 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  2. 原生js实现模块来回拖拽效果

    代码比较冗余,还没来得及做整理,往见谅. 主要用到的 JS 事件有: onmousedown:鼠标点下事件 onmousemove:鼠标移动事件 onmouseup:鼠标放开事件 具体代码如下: &l ...

  3. vuejs2.0运用原生js实现简单的拖拽元素功能

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  4. JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制

    知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区 ...

  5. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  7. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  8. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  9. vue组件实现图片的拖拽和缩放

    vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率.测试性.复用性等:二是组件应该是高内聚.低耦合的:三是 ...

随机推荐

  1. 【Visual Studio】报错SignTool Error: No certificates were found that met all the given criteria.

    问题:Virtual Studio如果证书或SignTool.exe签名工具出了问题,编译运行项目时会报这个错误. 解决:参考下面内容. http://stackoverflow.com/questi ...

  2. /etc/fstab文件损坏怎么办

    第一步首先关机挂载磁盘 第二步开机启动从BIOS,关键字F2 第三步光盘启动进入救援模式 第四步vi /mnt/sysimagimage/etc/fstab ,编辑完exit退出,reboot 进入光 ...

  3. AT command常用中文简解

    1.常用操作1.1 AT命令解释:检测 Module 与串口是否连通,能否接收 AT 命令:命令格式:AT<CR>命令返回:OK (与串口通信正常)             (无返回,与串 ...

  4. jsp页面积累

    out.print(页面html);response.setContexttype("");以页面的形式展现java

  5. s:debug标签的错误ConcurrentModificationException

    搭建SSH的时候页面上加入<s:debug>标签后台出现 严重: Servlet.service() for servlet jsp threw exception java.util.C ...

  6. 电脑的CPU可直接解读的数据机器码

    机器语言(machine language)是一种指令集的体系.这种指令集,称机器码(machine code),是电脑的CPU可直接解读的数据. 机器码有时也被称为原生码(Native Code), ...

  7. linux -- ubuntuserver 安装Apache后，修改默认目录和分布式配置文件可执行

    装了apache后,访问出现The requested URL *** was not found on this server,查看了下/etc/httpd/conf/httpd.conf,发现原因 ...

  8. CIRI 识别circRNA的原理

    CIRI 根据circRNA 连接点处的reads来识别circRNA, 在连接点处的reads 其比对情况非常特殊: CIRI 根据3种模型来识别circRNA, 连接点处的read 叫做junct ...

  9. 【Java面试题】21 Java中的异常处理机制的简单原理和应用。

    异常指Java程序运行时(非编译)所发生的非正常情况或错误. java对异常进行了分类,不同类型的异常使用了不同的java类,所有异常的根类为java.lang.Throwable.Throwable ...

  10. PHP实现MySQL数据导出为EXCEL（CSV格式）

    <?php // 输出Excel文件头,可把user.csv换成你要的文件名 header('Content-Type: application/vnd.ms-excel'); header(' ...