js 实现图片大小的伸缩

通过拉取图片上，下，左，右，上左，上右，下左，下右，边框和边角实现图片的伸缩。

1.html代码

<div class="boxs">
    <span class="l"></span>
    <span class="r"></span>
    <span class="t"></span>
    <span class="b"></span>
    <span class="tl"></span>
    <span class="tr"></span>
    <span class="bl"></span>
    <span class="br"></span>
    <img src="./1.jpg" alt="">
  </div>

 

2.css代码

body {padding: 0;margin: 0;}
.boxs {position: absolute; left: 100px; top: 100px; min-height: 100px; min-width: 100px;
overflow: hidden; }
 /*四边*/
.boxs .l,.boxs .b,.boxs .t,.boxs .r { position: absolute; z-index: 1; background: #666;}
.boxs .l,.boxs .r { width: 10px; height: 100%; cursor: col-resize; }
.boxs .t,.boxs .b {height: 10px; width: 100%; cursor: row-resize;}
.boxs .l { left: 0; }
.boxs .r { right: 0; }
.boxs .t { top: 0; }
.boxs .b { bottom: 0; }
/*四角*/
.boxs .tl,.boxs .tr,.boxs .bl,.boxs .br { position: absolute; background-color: #ccc;       z-index: 2; width: 10px; height: 10px; cursor: nw-resize; }
.boxs .tr { right: 0; cursor: ne-resize }
.boxs .bl { bottom: 0; cursor: ne-resize }
.boxs .br { bottom: 0; right: 0; }
.boxs img { width: 100%; height: 100%; vertical-align: top; }

3. js代码

window.onload = function () {
      var oDiv = document.getElementsByClassName('boxs')[0];
      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;
        };
      }
    };