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

<!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. 风雪之隅（Laruence PHP开发组成员, Zend兼职顾问, Yaf, Yar, Yac, Opcache等项目作者、维护者.）

    http://www.laruence.com/?from=inf&wvr=5&loc=infblog

  2. ExtJs TreePanel 全选与反选

    selectAll: function() { this.getRootNode().eachChild(function (child) { child.set('checked', true); ...

  3. poll--wait for some event on a file descriptor

    poll同select,用于监控file descriptor事件,推荐用poll的升级版epool来实现功能,但在简单应用中使用poll更方便. #include <poll.h> in ...

  4. android 相机拍照后选择照片编辑，相片编辑界面直线形状会显示锯齿状

    因为 decode 出来的图片太小,小于屏幕.所以,显示的时候 会把图片略微放大,导致直线形状会显示锯齿状.   能够改动getScreenImageSize 方法中的size 的大小,比方能够把13 ...

  5. StarRTC , AndroidThings , 树莓派小车，公网环境，视频遥控(一)准备工作

    原文地址:http://blog.starrtc.com/?p=48 啥也不说,先来个视频看看效果 视频播放器     00:00   00:54     概述为了体现StarRTC的实时音视频传输能 ...

  6. python将数据写入mysql乱码的解决办法

    1.错误为:插入乱码 报错: Python模块MySQLdb操作mysql出现2019错误:Can't initialize character set utf-8 解决: 写入数据语句为: cnn ...

  7. Storm ack和fail机制再论

    转自:http://www.cnblogs.com/fxjwind/p/3806404.html 之前对这个的理解有些问题,今天用到有仔细梳理了一遍,记录一下 首先开启storm tracker机制的 ...

  8. 《FPGA全程进阶---实战演练》第二章之硬件平台的搭建

    学习FPGA,多多少少应该要懂得硬件电路的设计,这样不单单增加了自己的技能,而且还能够对FPGA的硬件实现有更好的了解. 1 模块划分 对于一个基本的FPGA硬件平台,常用的几个电路部分:(1)电源电 ...

  9. struts 标签 牛逼之处

    <s:hidden>标签的value属性的类型是String类型,所以把<s:property value="#session.LOGIN_USER"/>当 ...

  10. e578. Setting the Clipping Area with a Shape

    This example demonstrates how to set a clipping area using a shape. The example sets an oval for the ...