js 实现按5%比例缩小计算

你可以通过 JavaScript 实现按照 5% 的比例缩小元素的大小。具体的代码如下：

const element = document.getElementById('my-element');
const currentWidth = element.clientWidth;
const currentHeight = element.clientHeight;
const newWidth = currentWidth * 0.95;
const newHeight = currentHeight * 0.95;

element.style.width = `${newWidth}px`;
element.style.height = `${newHeight}px`;

这段代码首先获取要缩小的元素，然后获取其当前的宽度和高度。接着，通过将当前的宽度和高度分别乘以 0.95 来计算新的宽度和高度。最后，将新的宽度和高度应用到元素的样式中，从而实现缩小的效果。

相关问题

js控制页面等比例缩小

你可以使用CSS中的transform属性，结合scale函数来实现页面等比例缩小。具体操作如下：

1. 为需要进行缩小的元素添加一个类或id，例如：

<div class="zoom"></div>

2. 在CSS中为该元素添加如下样式：

.zoom {
    transform: scale(0.8); /* 缩小比例，可以根据实际情况进行调整 */
    transform-origin: 0 0; /* 缩放起点，可以根据实际情况进行调整 */
}

3. 如果需要实现页面自适应，可以在JS中动态计算缩放比例，并将其应用于所需元素，例如：

var zoomRatio = window.innerWidth / 1920; /* 1920是设计稿宽度，可以根据实际情况进行调整 */
document.querySelector('.zoom').style.transform = 'scale(' + zoomRatio + ')';

这样就可以实现页面等比例缩小了。

js实现图片拖拽 鼠标位置放大缩小

要实现同时实现图片的拖拽和鼠标位置放大缩小，可以参考以下步骤：

1. 在 HTML 中插入一张图片，设置图片的宽度和高度，并将其放置在一个容器中。

2. 使用 CSS 设置容器的样式，将容器的宽度和高度设置为图片的一半，并将 overflow 属性设置为 hidden，这样当图片放大时，容器可以隐藏超出容器范围的部分。

3. 使用 JavaScript 监听鼠标按下事件，当鼠标按下时，记录下鼠标的位置和容器的位置。

4. 使用 JavaScript 监听鼠标移动事件，当鼠标移动时，根据鼠标的位置和容器的位置计算出容器应该移动的距离，并将容器移动到新的位置。

5. 当鼠标离开容器时，停止拖拽。

6. 使用 JavaScript 监听鼠标滚轮事件，根据滚轮的方向计算出图片应该放大或缩小的比例，并将图片缩放到新的大小。

下面是一个示例代码：

HTML代码：

<div class="container">
  <img src="image.jpg" width="400" height="300" />
</div>

CSS样式：

.container {
  width: 200px;
  height: 150px;
  overflow: hidden;
  position: relative;
}

.container img {
  transition: all 0.3s ease-out;
  position: absolute;
  left: 0;
  top: 0;
}

.container:hover img {
  transform: scale(2);
}

JavaScript代码：

var container = document.querySelector('.container');
var img = container.querySelector('img');
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var isDragging = false;
var startX = 0;
var startY = 0;
var containerLeft = 0;
var containerTop = 0;

container.addEventListener('mousedown', function(e) {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  containerLeft = container.offsetLeft;
  containerTop = container.offsetTop;
});

container.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  var deltaX = e.clientX - startX;
  var deltaY = e.clientY - startY;
  container.style.left = containerLeft + deltaX + 'px';
  container.style.top = containerTop + deltaY + 'px';
});

container.addEventListener('mouseup', function() {
  isDragging = false;
});

container.addEventListener('mouseleave', function() {
  isDragging = false;
});

container.addEventListener('wheel', function(e) {
  e.preventDefault();
  var delta = e.deltaY < 0 ? 0.1 : -0.1;
  var scaleX = img.offsetWidth / containerWidth + delta;
  var scaleY = img.offsetHeight / containerHeight + delta;
  img.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
});

注意：这个示例只是一个简单的实现，实际应用中可能需要处理更多的细节问题，比如边界处理、拖拽的范围限制等。