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

<!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】VS常用调试技巧——笔记

    CSDN的文档: https://msdn.microsoft.com/en-us/library/aa295838(v=vs.60).aspx 情景一:[监视]变量时,当运行离开当前函数后,怎么看到 ...

  2. java中的访问控制符

    首先来一张图: 对于一个类而言访问控制符只有一个public和默认无修饰符.其他的几个访问修饰符对于变量和方法都可以使用. 下面介绍具体的使用. 1. 公有访问控制符(public) Java的类是通 ...

  3. C语言 · 关联矩阵

    算法训练 关联矩阵   时间限制:1.0s   内存限制:512.0MB      问题描述 有一个n个结点m条边的有向图,请输出他的关联矩阵. 输入格式 第一行两个整数n.m,表示图中结点和边的数目 ...

  4. Server 2008作为打印服务器的四大错误解决方案

    http://os.51cto.com/art/201004/197322.htm http://os.51cto.com/art/201004/197322_1.htm http://os.51ct ...

  5. hadoop中的Jobhistory历史服务器

    1.  启动脚本 mr-jobhistory-daemon.sh start historyserver 2. 配置说明 jobhistory用于查询每个job运行完以后的历史日志信息,是作为一台单独 ...

  6. 奇妙的go语言（面向对象）

    [ 声明:版权全部.欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 有过C++语言学习经历的朋友都知道.面向对象主要包含了三个基本特征:封装.继承和多态.封装,就 ...

  7. LINQ教程三：Lambda表达式解剖

    C#3.0(.NET3.5)中引入了Lambda表达式和LINQ.Lambda表达式是使用一些特殊语法表示匿名方法的较短方法. 最基本的Lambda表达式语法如下: (参数列表)=>{方法体} ...

  8. 『Golang』Martini框架入门

    本文介绍golang中的优秀web开发框架martini! 序 Martini框架是使用Go语言作为开发语言的一个强力的快速构建模块化web应用与服务的开发框架.Martini是一个专门用来处理Web ...

  9. Windows通用知识讲解一

    Window应用程序的类型 --控制台程序Console DOS程序,本身没有窗口,通过Windows DOS窗口执行 --窗口程序 拥有自己的窗口,可以与用户交互 --库程序 存放代码.数据的程序, ...

  10. C中入栈顺序和运算顺序有关系吗？

    如下代码会怎么执行? printf( "%c,%c,%c\n", getchar(), getchar(), getchar() ); 实际测试,是倒序执行,感觉上符合“C函数的形 ...