基于x位置的缩放元素

Scale element based on x position

本文关键字：缩放 元素 位置 基于      更新时间：2023-09-26

数学不是我最擅长的领域，我对如何解决这个问题有点困惑。

以下面的代码为例: 
let node = document.querySelector('div');
let d;
function update({clientX}) {
  if(!d) return; // Dragging?
  let w = innerWidth; // Window width
  let s = ...; // Scale value?
  node.style.transform = `translateX(${v}) scale(${s})`;
};
node.onmousedown = () => d = true;
node.onmouseup = () => d = false;
node.onmousemove = update;

假设我在浏览器窗口中从左向右拖动div，我怎么才能使它在屏幕中心时是1.0比例，当它到达外缘时它变得越来越小到0.0 ?

也许你想按百分比缩放?

function scaleByPercent(element, percent){
  var p = percent/100, e = element.getBoundingClientRect(), w = e.width, h = e.height;
  e.style.width = w*p+w; e.style.height = h*p+h;
}
scaleByPercent(document.getElementById('yourDivId'), 25);

当然，你必须在拖动的时候改变百分比

相关文章：