js实现div上下左右拉伸

2018-10-26 08:30:01

js实现div上下左右拉伸

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>div的拉伸</title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        body{padding: 100px;}
        #box{position: absolute;width: 150px;height: 150px;background: orangered;border: 10px solid lightcoral;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    /*
     * 移动得距离就为点击位置坐标(clientX) - 移动后的位置坐标(clientX),那么现在盒子总共的宽度就是其本身宽度(oBox.offsetWidth)加上前面坐标之差。向左拉伸原理差不多,就是多加个改变盒子的位置,盒子的offsetLeft等于光标移动后的位置坐标。我们对盒子就行绝对定位,获取它的left值,将它left值减去改变的距离,他就会向左边拉伸了。上下同理
     */

    var oBox = document.getElementById('box');
    oBox.onmousedown = function(e){
        e = e ||event;
        var x = e.clientX;
        var y = e.clientY;
        var oBoxL = oBox.offsetLeft;
        var oBoxT = oBox.offsetTop;
        var oBoxW = oBox.offsetWidth;
        var oBoxH = oBox.offsetHeight;

        var d = 0;
        if(x < oBoxL + 10){
            d = 'left';
        }
        else if(x > oBoxL + oBoxW -10){
            d = 'right';
        }

        if(y < oBoxT + 10){
            d = 'top';
        }
        else if(d < oBoxT + oBoxH -10){
            d = 'bottom';
        }
        if(x < oBoxL + 10 && y < oBoxT + 10){
            d ='LT';
        }
        document.onmousemove = function(e){
            e = e ||event;
            var xx = e.clientX;
            var yy = e.clientY;
            if(d == 'left'){
                oBox.style.width = oBoxW + x -xx + 'px'
                oBox.style.left = xx  + 'px';
            }
            else if(d == 'right'){
                oBox.style.width = oBoxW + xx -x + 'px'
            }

            if(d == 'top'){
                oBox.style.height = oBoxH + y - yy + 'px';
                oBox.style.top = yy + 'px';
            }
            else if(d == 'bottom'){
                oBox.style.height = oBoxH + yy - y + 'px';
            }
            if(d == 'LT'){
                oBox.style.width = oBoxW + x -xx + 'px'
                oBox.style.left = xx  + 'px';
                oBox.style.height = oBoxH + y - yy + 'px';
                oBox.style.top = yy + 'px';
            }
            return false;
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
        if(e.preventDefault){
            e.preventDefault();
        }
    }
</script>
</html>
--------------------- 
作者:sweetllh 
来源:CSDN 
原文:https://blog.csdn.net/sweetllh/article/details/71367818 
版权声明:本文为博主原创文章,转载请附上博文链接!
  • 2017-09-05 11:48:16

    Laravel 服务容器实例教程 —— 深入理解控制反转(IoC)和依赖注入(DI)

    容器,字面上理解就是装东西的东西。常见的变量、对象属性等都可以算是容器。一个容器能够装什么,全部取决于你对该容器的定义。当然,有这样一种容器,它存放的不是文本、数值,而是对象、对象的描述(类、接口)或者是提供对象的回调,通过这种容器,我们得以实现许多高级的功能,其中最常提到的,就是 “解耦” 、“依赖注入(DI)”。本文就从这里开始。

  • 2017-09-11 09:22:09

    nginx配置返回文本或json

     有些时候请求某些接口的时候需要返回指定的文本字符串或者json字符串,如果逻辑非常简单或者干脆是固定的字符串,那么可以使用nginx快速实现,这样就不用编写程序响应请求了,可以减少服务器资源占用并且响应性能非常快

  • 2017-09-11 11:30:09

    linux 获取经过N层Nginx转发的访问来源真实IP

    通常情况下我们使用request.getRemoteAddr()就可以获取到客户端ip,但是当我们使用了nginx作为反向代理后,由于在客户端和web服务器之间增加了中间层,因此web服务器无法直接拿到客户端的ip,通过$remote_addr变量拿到的将是反向代理服务器的ip地址。如果我们想要在web端获得用户的真实ip,就必须在nginx这里作一个赋值操作,如下:

  • 2017-09-11 16:15:11

    Nginx日志管理

    通过访问日志,你可以得到用户地域来源、跳转来源、使用终端、某个URL访问量等相关信息;通过错误日志,你可以得到系统某个服务或server的性能瓶颈等。因此,将日志好好利用,你可以得到很多有价值的信息。