我做了一个纯JS可调整大小的元素，但调整大小的元素不光滑。如何使这更平滑？ [英] I made a pure JS resizeable element, but the resizing element is not smooth. How do I make this more smooth?

问题描述

所以，我做了这个东西，其中一半的元素是可调整大小的，它暴露了父元素，你可以看到父元素的 background-image 。一切似乎工作正常，除了调整大小不够光滑。

So, I made this thing where half of the element is resizable and which exposes the parent element and you can see the background-image of the parent element. Everything else seems to work fine except that the resizing is not smooth enough. After first time resizing, it just starts to stick and not perform well.

链接： https://jsfiddle.net/mcquintrix/u0Ljnttg/2/

var links = document.getElementById("imageLinks");
links.onmousedown = function(e) {
  var theSrc = e.target.dataset.src;
  if (theSrc) {
    str = "url(\"" + theSrc + "\");";
    //Sorry for using this:
    document.getElementById("imageBack").setAttribute("style", "background-image:" + str)
  }
}

var resizer = document.getElementById("content-resize");
resizer.onmousedown = resizableStart;

function resizableStart(e) {
  var elem = document.getElementById("content");
  elem.originalW = elem.clientWidth;
  this.onmousemove = resizableCheck;
  this.onmouseup = this.onmouseout = resizableEnd;
}

function resizableCheck(e) {
  var elem = document.getElementById("content");
  if (elem.clientWidth === elem.originalW) {
    elem.originalX = e.clientX;
    this.onmousemove = resizableMove;
  }
}

function resizableMove(e) {
  var elem = document.getElementById("content");
  var newW = elem.originalW - e.clientX + elem.originalX;
  if (newW < elem.originalW) {
    elem.style.width = newW + 'px';
  }
}

function resizableEnd() {
  this.onmousemove = this.onmouseout = this.onmouseup = null;
}

html,
body {
  min-height: 100% !important;
  height: 100%;
}
.container {
  width: 100%;
  min-height: 100%;
  height: 100%;
}
.images {
  width: 100%;
  min-height: 100% !important;
  height: 100%;
}
#content {
  min-height: 100% !important;
  height: 100%;
  /*Change this to change width*/
  width: 70%;
  resize: horizontal;
  float: right;
  position: relative;
  background: white;
}
div {
  border: 1px solid black;
}
span {
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 20px);
  left: -10px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  display: inline-block;
  background: white;
}

<div class='container'>
  <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')">
    <div class='content' id="content">
      <div id="imageLinks">
        <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a>
        <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a>
        <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a>
        <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a>
      </div>
      <span id="content-resize"></span>
    </div>
  </div>
</div>

推荐答案

@ Harshal Carpenter，这是我的代码片段：

@Harshal Carpenter, here's my snippet:

我对代码所做的是：

1.删除这些线条，可以防止以前调整大小后图像变小。

1.Remove these lines, which prevents the image to become smaller after the resize it to larger previously.

if (newW < elem.originalW) {
   elem.style.width = newW + 'px';
}

1. this.onmouseout 以防止调整大小停止从你的圆形手柄离开你的鼠标。您可能希望继续调整大小，因为您的鼠标可能会在圆形旋钮之前移动快，这会导致鼠标光标离开圆形旋钮。

1. Remove the this.onmouseout to prevent resizing stop when you leave your mouse from that circular handle. You might want to continue resizing because your mouse might move to fast before the circular knob do, which end up your mouse cursor exiting the circular knob.

鼠标事件监听器移动到 div＃imageBack 而不是 div＃content-resize 可能希望它继续拖动，即使鼠标保留 div＃content-resize 。

attach the mouse event listener to the div#imageBack instead of the div#content-resize, the same reason as above, you might want it to continue dragging even if the mouse leaves the div#content-resize.

var links = document.getElementById("imageLinks");
links.onmousedown = function(e) {
  var theSrc = e.target.dataset.src;
  if (theSrc) {
    str = "url(\"" + theSrc + "\");";
    //Sorry for using this:
    document.getElementById("imageBack").setAttribute("style", "background-image:" + str)
  }
}


var container = document.getElementById("imageBack");
var resizer = document.getElementById("content-resize");
container.onmousedown = resizableStart;

function resizableStart(e) {
	if(e.target == resizer){
	  var elem = document.getElementById("content");
    elem.originalW = elem.clientWidth;
    this.onmousemove = resizableCheck;
    this.onmouseup = resizableEnd;
  }
}

function resizableCheck(e) {
  var elem = document.getElementById("content");
  if (elem.clientWidth === elem.originalW) {
    elem.originalX = e.clientX;
    this.onmousemove = resizableMove;
  }
}

function resizableMove(e) {
  var elem = document.getElementById("content");
  var newW = elem.originalW - e.clientX + elem.originalX;
  elem.style.width = newW + 'px';
}

function resizableEnd() {
  this.onmousemove = this.onmouseout = this.onmouseup = null;
}

html,
body {
  min-height: 100% !important;
  height: 100%;
}

.container {
  width: 100%;
  min-height: 100%;
  height: 100%;
}

.images {
  width: 100%;
  min-height: 100% !important;
  height: 100%;
}

#content {
  min-height: 100% !important;
  height: 100%;
  /*Change this to change width*/
  width: 70%;
  resize: horizontal;
  float: right;
  position: relative;
  background: white;
}

div {
  border: 1px solid black;
}

span {
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 20px);
  left: -10px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  display: inline-block;
  background: white;
}

<div class='container'>
  <div class='images' id="imageBack" style="background-image: url('http://data.whicdn.com/images/20948152/large.png')">

    <div class='content' id="content">
      <div id="imageLinks">
        <a href="#" data-src='http://ichef.bbci.co.uk/news/660/cpsprodpb/1325A/production/_88762487_junk_food.jpg'>1</a>
        <a href="#" data-src='http://i.imgur.com/NhDejjN.jpg'>2</a>
        <a href="#" data-src='https://s-media-cache-ak0.pinimg.com/564x/80/40/9d/80409d8c06d21e0c0416a40c2176def3.jpg'>3</a>
        <a href="#" data-src='http://data.whicdn.com/images/20948152/large.png'>4</a>
      </div>
      <span id="content-resize"></span>
    </div>
  </div>
</div>

这篇关于我做了一个纯JS可调整大小的元素，但调整大小的元素不光滑。如何使这更平滑？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！