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

<!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. 【Unity笔记】常见集合类System.Collections

    ArrayList:长度可变数组,不限定类型 ArrayList al = new ArrayList(); ↓ List:替代ArrayList,限定类型 List list = new List& ...

  2. C语言 · 报时助手

    基础练习 报时助手   时间限制:1.0s   内存限制:512.0MB          锦囊1 判断,字符串输出. 锦囊2 按要求输出,判断特殊情况.   问题描述 给定当前的时间,请用英文的读法 ...

  3. MySQL 时间戳（Timestamp）函数

    1. MySQL 获得当前时间戳函数:current_timestamp, current_timestamp() mysql> select current_timestamp, curren ...

  4. kettle7.1无法从Mongo中读取数据

    今天使用kettle读取mongo数据库时,刚开始一直无法读取数据: 在配置项中偶然选择了一个nearest然后成功了,麻蛋. 然后百度查询了下Read Reference是干嘛的,原来是读取源的模式 ...

  5. Hive中order by，sort by，distribute by，cluster by的区别

    一:order by order by会对输入做全局排序,因此只有一个Reducer(多个Reducer无法保证全局有序),然而只有一个Reducer,会导致当输入规模较大时,消耗较长的计算时间.关于 ...

  6. Specified VM install not found: type Standard VM, name jdk1.6...

    运行ant的时候出现 Specified VM install not found: type Standard VM, name.... 搞了好久..汗汗 尝试删除这些文件: ... / .meta ...

  7. 【转】ImageView的Scaletype参数设置

    ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分,等等. 设置的方式包括: 1. 在layout xml中定义Android:s ...

  8. 更改HDFS权限

    hdfs dfs -chmod -R 755 / 之前执行过这条语句,但是总是提示: 15/05/21 08:10:18 WARN util.NativeCodeLoader: Unable to l ...

  9. 关于Cocos2d-x中GameController的定义

    GameController类是继承自Scheduler(有计时功能)或者Ref(可自动释放)的用户自己定义的一个控制器 如果一个场景有多个层的话,要用GameController,一个GameCon ...

  10. WaitForSingleObject()

    参见:http://blog.csdn.net/xiaobai1593/article/details/6672193 1. 格式 DWORD WaitForSingleObject( HANDLE  ...